v-for中每个项目的单击指示器

Question

我有一个嵌套的v-for，其中子v-for中的每个项都可以单击。我正在尝试将单击的任何项目推入数组，并且它运行良好。然而，如果我没有任何迹象表明这些项目是被选中的，我觉得这有点无聊。

例如
parent v-for由星期日(星期一至星期日(组成，而child v-for由时间(上午8点、上午9点等(组成

所以我把它渲染成这样。

HTML

<div v-for"(day,d) in week_days">
<p>{{day}}</p>
<hr>
<small>List of times</small>
<p v-for="(time,t) in time_list"
:class={'activeItem ': moment(day).format('MMMM DD YYYY')+' '+time == activeItem}
@click="selectTime(<time and date object here>)"> {{time}} 
</p>
</div>

JS

selectTime(obj) {
this.activeItem = obj.date+' '+obj.time; //2020-10-22 9:30PM
this.selected_time.push(obj); //not related to the main problem
}

CSS

.active {
color: red;
}

到目前为止，这一项有效，但仅适用于单个项目，而不是所有选定项目。

问题是：

1. 如何使所有选定的项目都被指示/标记为已单击
2. 至于指示符/标记，是否可以将{{time}}项替换为Marked项，而不是将文本着色为红色

Answer 1

为什么不为所有已选择的项创建一个计算属性？类似于：

computed: {
selectedItems() {
return this.selected_item.map(item => item.format('LLL'))
}
}

然后在你的模板上，你可以检查该项目是否在你的v-for循环中被选中：

<div v-for"(day,d) in week_days">
<p>{{day}}</p>
<hr>
<small>List of times</small>
<p v-for="(time,t) in time_list"
:class={'activeItem ': selectedItems.includes(moment(day).format('LLL'))}
@click="selectTime(<time and date object here>)"> {{time}} 
</p>
</div>