Vue 2 - How to select multiple values from an array or object

Question

With v-for I display elements to the screen then using classes from vue js ( :class ) I present the ability to select certain elements by clicking on them

The problem is that my plans have changed and now I need to make sure that the user can select as many elements as he wants, that is, at the moment you can select only one element when clicking on another element, the active class from the previous element is disabled now I need to select as many elements How many do you need.

Here is the given 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>

Answer 1

You can use array to first define the selectedTime and them use push and splice to add or remove items.

Update the template section as this:

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

Update the data section:

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

Answer 2

if you have the ability yo create an object of each item which will contain the isSelected property it will be the best way to achieve this:

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

But if you have to use a different variable that holds your selected value you can save an array of selected items in the data, and add the clicked item to the array like so:

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