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.
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>
item.schedule_detailsdata