Vue 2 - 如何从数组或对象中选择多个值答案

【问题标题】：Vue 2 - How to select multiple values from an array or objectVue 2 - 如何从数组或对象中选择多个值
【发布时间】：2021-07-15 14:32:41
【问题描述】：

使用v-for，我将元素显示到屏幕上，然后使用来自 vue js (:class) 的类，我展示了通过单击它们来选择某些元素的能力

问题是我的计划已经改变了，现在我需要确保用户可以选择任意多的元素，也就是说，此刻你在点击另一个元素时只能选择一个元素，活动的上一个元素的类现在被禁用了我需要选择尽可能多的元素你需要多少。

这是给定的code in 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>

【问题讨论】：

标签： javascript vue.js select vuejs2

【解决方案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: [],
    };
},

【讨论】：

【解决方案2】：

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

<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)"
>

【讨论】：