Почему не работает удаление элемента из массива?

Question

[Intelix]

У меня есть компонент в котором, с помощью v-for выводится несколько блоков с заголовками и дополнительной информацией.

На обертке блока обработчик клика, который вызывает функцию в которой проверяется есть ли элемент (по которому кликнули) с таким id в массиве, если есть то удаляем его, иначе добавляем.

На блоке с доп. инфой висит v-if с условием есть ли элемент с таким id в массиве.

Мне нужно сделать так, чтобы блок с инфой показывался если на него кликнули и исчезал если кликнули второй раз. (для каждого блока, те могут быть открыты сразу несколько)

Но почему-то правильно работает только первый блок, при повторном нажатии на последующие их id из массива не удаляется.
https://codesandbox.io/s/blissful-https-zg4tg?file...

Comments

[Сергей Сергей]

Индексы массива данных не соответствуют индексам массива отображения. Тут всё вперемешку: индексы, идентификаторы, два массива.

Answer 1

[0xD34F]

Работает. Удалять только бывает нечего. С чего вы взяли, что позиции элементов и их id в массивах elementData и selectedElArr будут совпадать? Индекс надо не передавать в метод, а вычислять самостоятельно внутри:

methods: {
  toggleElement(id) {
    const index = this.selectedElArr.indexOf(id);
    if (index !== -1) {
      this.selectedElArr.splice(index, 1);
    } else {
      this.selectedElArr.push(id);
    }
  },
  ...

@click="toggleElement(data.id)"

Answer 2

[eRKa]

Ошибка в логике метода showElement.

Вы добавляете id всегда в конец списка, а удаляете id по индексу положения div в списке, хотя не факт, что id именно в этом месте будет.

Например, кликнули по 3-му элементу, потом по второму, будет selectedElArr = [2, 1], потом кликаете по 3-ему, чтобы его закрыть и метод захочет удалить selectedElArr[2], а такого элемента даже нет. Ну и т.д.

Логичнее добавлять selectedElArr[index]=true и удалять selectedElArr[index]=false, если опираться на порядок div в списке. Ну и проверять потом так же

if (!!this.selectedElArr[index]) {
 this.selectedElArr[index] = false;
} else {
 this.selectedElArr[index] = true;
}}

Ну или одной строкой

this.selectedElArr[index] = !this.selectedElArr[index];

Если не опираться, то я бы добавил поле data.isOpened (isActive, isVisible и т.д.) и уже отталкивался от него, это мне кажется надежнее.

Answer 3

[Евгений]

Что-то у вас совсем всё сложно, это же vue!

<template>
  <div
    class="element"
    v-for="data in elementData"
    :key="data.id"
    @click="data.show = !data.show"
  >
    <h1>Клик</h1>
    <div 
      v-if="data.show" 
      class="elementInfo"
    >
      <h5>{{ data.name }}</h5>
      <p>{{ data.id }}</p>
    </div>
  </div>
</template>