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