Блог

У меня есть вложенный 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 .

Почему бы не иметь вычисляемое свойство со всеми выбранными элементами? Что-то вроде:

 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>