用vue-js类条件

Question

我做了一个包含事件的周日历视图，并有空闲或选定的事件。我试着给选定的活动不同的背景色，但我觉得我错过了一些东西，所以如果有人能帮我，那就太好了。

要提供有关代码的更多详细信息，请执行以下操作：我有一个事件(对象(数组，当事件空闲时，user_id为0。所以我在数据中放了一个布尔变量，并在displayEvents函数的渲染过程中更新它。我知道这不是最好的方法，但我找不到其他有效的解决方案。所以它当然返回了"一个无限循环问题"如果有人能找到更好的方法来获得同样的结果，我会很高兴的。

这是我的代码：

//the template 
------------------------------
<table>
<tbody>
<tr v-for="(time, index) in times" :key="index">
<td class="headcol">{{time}}</td>
<td v-for="(dayDate, index) in calendarWeek.weekDates" :key="index"  >
<div v-show="displayEvent(dayDate, time)"
:class="[event, selected !== 0 ? 'event_selected':'']"
@click="toggleSelect(dayDate, time)" >
{{formatDate(dayDate)}}
<br>{{time}}
</div>
</td>
</tr>
</tbody>
</table>  
// the script 
---------------------
data(){
return:{  
.....
selected = false,
}},
methods:{
//display Events
displayEventC(dayDate, time) {
if ( this.$store.state.token ) {
return this.events.find(el=>{
if( el.event_date === this.formatDate(dayDate) && el.start_time === time && el.user_id === 0 ){
this.selected=false;
return el
}
if( el.event_date === this.formatDate(dayDate) && el.start_time === time &&  el.user_id == this.$store.state.userId ){ 
this.selected=true;
return el
} 
});
}
else{
return this.events.find(el=>{
if( el.event_date === this.formatDate(dayDate) && el.start_time === time && el.user_id === 0 ){
return el
}
});
}
},

这是我的展品图像

在此处输入图像描述

Answer 1

我不知道我是否理解你，但这是我的建议：

//div in v-fored td
:class="dynamicClass(dayDate)"
// script
computed: {
dynamicClass () {
return (day) => {
let event = this.events.find(ev => ev.event_date === day);
return event.user_id !== 0 ? 'event_selected':'event_free'
}
} 
}

Answer 2

解决方案是添加一个条件，即我的对象的类型不应该是未定义的，并在Eggon 的答案中使用了这个想法