[Vuejs]-Vuejs: show data with day index on schedule

by

0👍

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>

Leave a comment