Vuejs: show data with day index on schedule

Question

I want to show the schedule, with if condition. If the index in the loop is the same as the index day, then display 'index' else is '-'.

for now, this is my view:

My code:

<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>

My expectations:

Thanks a lot.

Answer 1

This v-if logic should work fine. See the below code

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>