Как сделать чтобы при v-for класс добавлялся и убирался только по клику на данный элемент?

Question

[nastya_zholudeva]

Как сделать чтобы при v-for класс добавлялся и убирался только по клику на данный элемент? Я попробовала тут, но у меня получилось, что если нажать на другой элемент, то открытый закрывается, а мне нужно, чтобы он закрывался только если я на него нажму

Answer 1

[0xD34F]

Добавить каждому элементу массива свойство, отвечающее за наличие класса:

todos: [
  { open: false, ... },
  { open: false, ... },
  ...
],

По клику переключать значение этого свойства:

@click="todo.open = !todo.open"

Назначать класс в зависимости от значения:

:class="{ 'dropdown-active': todo.open }"

https://jsfiddle.net/2ef8yojn/

Comments

[nastya_zholudeva]

0xD34F, а если мне todos приходит с vuex?

computed: {
      ...mapGetters({
        todos: 'todos/todos'
      })
    },

[0xD34F]

nastya_zholudeva, сделайте мутацию, которая будет переключать состояние указанного элемента.

[nastya_zholudeva]

0xD34F, я в created мутирую состояние, чтобы добавить open: false

created () {
      this.$store.commit('todos/setTodos', {open: false})
    }

// store/todos.js
setTodos (state, payload) {
    state. todos.map((order) => {
      order. open = payload. open
    })
  }

Я не понимаю, как при этом потом мутировать состояние каждого объекта данного массива todos, чтобы переключать true/false

[0xD34F]

я в created мутирую состояние, чтобы добавить open: false

Зачем? Это свойство должно изначально там быть.

Я не понимаю, как при этом потом мутировать состояние каждого объекта данного массива todos, чтобы переключать true/false

Мутация, принимает элемент, делает ему open = !open. Типа так.