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>

Yash Maheshwari · Accepted Answer · 2021-04-21 12:01:29Z

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: [],
    };
},

answered Apr 21, 2021 at 12:01

Yash Maheshwari

2,4122 gold badges10 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Noy Gafni · Accepted Answer · 2021-04-21 12:09:03Z

1

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

answered Apr 21, 2021 at 12:09

Noy Gafni

1,2411 gold badge14 silver badges28 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related