Vue 2 - 如何 select 来自数组或 object 的多个值

Question

使用v-for我在屏幕上显示元素，然后使用来自 vue js 的类 ( :class ) 我通过单击某些元素来展示 select 某些元素的能力

问题是我的计划已经改变，现在我需要确保用户可以 select 任意数量的元素，也就是说，目前你可以 select 当点击另一个元素时，只有一个元素，活动的 ZA2F2ED4F8EBC2CBBDZC2以前的元素被禁用现在我需要 select 尽可能多的元素 你需要多少。

这是codesandbox中的给定代码

<template>
  <div>
    <ul class="times-slot">
      <li
        v-for="(item, index) in TimeToChoose"
        :key="index"
        :class="{ 'selected-time': item === selectedTime }"
        v-on:click="selectedTime = item"
      >
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
let ts = require("time-slots-generator");

export default {
  name: "HelloWorld",
  data() {
    return {
      TimeToChoose: ts.getTimeSlots([], true, "half"),
      selectedTime: "",
    };
  },
};
</script>

<style scoped>
.selected-time {
  background: #CC003D;
  border: 1px solid #FFFFFF;
  color: white;
}

.times-slot {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}
.times-slot li {
  min-width: 70px;
  border-radius: 7px;
  border: #ffffff;
  padding: 4px 0 4px 0;
}

.times-slot li:hover {
  cursor: pointer;
}

li {
  list-style-type: none;
}
</style>

Answer 1

您可以使用数组首先定义 selectedTime，然后他们使用push和splice来添加或删除项目。

将模板部分更新为：

<ul class="times-slot">
      <li
        v-for="(item, index) in TimeToChoose"
        :key="index"
        :class="{ 'selected-time': selectedTime.includes(item) }"
        v-on:click="selectedTime.includes(item) ? selectedTime.splice(selectedTime.indexOf(item), 1) : selectedTime.push(item)"
      >
        {{ item }}
      </li>
</ul>

更新数据部分：

data() {
    return {
      TimeToChoose: ts.getTimeSlots([], true, "half"),
      selectedTime: [],
    };
},

Answer 2

如果您有能力为每个项目创建一个包含isSelected属性的 object，这将是实现此目的的最佳方法：

<li
   v-for="(item, index) in TimeToChoose"
   :key="index"
   :class="{ 'selected-time': item.isSelected }"
   @click="item.isSelected = !item.isSelected"
>

但是，如果您必须使用保存所选值的不同变量，您可以在数据中保存一组选定项，并将单击的项添加到数组中，如下所示：

<li
   v-for="(item, index) in TimeToChoose"
   :key="index"
   :class="{ 'selected-time': selectedItems.includes(item) }"
   @click="selectedItems.push(item)"
>