@Intelix

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

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

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

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

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

Но почему-то правильно работает только первый блок, при повторном нажатии на последующие их id из массива не удаляется.
https://codesandbox.io/s/blissful-https-zg4tg?file...
  • Вопрос задан
  • 91 просмотр
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
Работает. Удалять только бывает нечего. С чего вы взяли, что позиции элементов и их 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)"
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
@kttotto
все, что .NET
Ошибка в логике метода 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 и т.д.) и уже отталкивался от него, это мне кажется надежнее.
Ответ написан
Комментировать
cyber-jet
@cyber-jet
Что-то у вас совсем всё сложно, это же 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>
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы