Vuejs：按计划显示日期索引的数据

Question

我想显示带有 if 条件的时间表。如果循环中的索引与索引日相同，则显示'index'否则为'-'。

目前，这是我的看法：

我的代码：

<td v-for="(n, i) in 7" :key="i">
    <span :key="index" v-for="(item, index) in item.schedule_detail">
        <span v-if="item.day === i">
            <span>{{ item.day }}</span>
        </span>
        <span v-else>-</span>
    </span>
</td>

我的期望：

非常感谢。

Answer 1

这个v-if 逻辑应该可以正常工作。请看下面的代码

new Vue({
  el: '#app',
  data: {
    item: {
      schedule_detail: [{
          "id": 1,
          "doctor_schedule_id": 1,
          "day": 0,
          "from_time": "08:00:00",
          "until_time": "12:00:00",
          "from_time_2": "17:00:00",
          "until_time_2": "21:00:00",
        },
        {
          "id": 2,
          "doctor_schedule_id": 1,
          "day": 2,
          "from_time": "08:00:00",
          "until_time": "21:00:00",
          "from_time_2": null,
          "until_time_2": null,
        }
      ]
    }
  }

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id='app'>
  <td><span :key="index" v-for="(i, index) in 7">
       <span v-if= "(i=item.schedule_detail.findIndex(x=>x.day===index)) >=0 ">
       {{item.schedule_detail[i].day}}
       </span>
    <span v-else>-</span>
    </span>
  </td>
</div>