Как применить v-if только для одного экземпляра v-for?

Question

[Intelix]

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

Когда нажимаю на обертку блока, показываются и скрываются сразу все элементы созданные циклом.
Как сделать так, чтобы показывался/скрывался только тот, по которому кликнули?

https://codesandbox.io/s/blissful-https-zg4tg?file...

Answer 1

[0xD34F]

Такие варианты есть:

1. Сделать компонент, который будет заниматься отображением данных только одного элемента массива, унести свойство show в этот компонент - у каждого экземпляра оно будет собственное, независимое от других.
   
2. Сделать свойство show массивом, хранить в нём id элементов, данные которых должны показываться.
   
3. Пусть элементы массива сами определяют, надо ли их содержимое демонстрировать - добавить свойство show каждому из них.
   

Это если данные в каждом из блоков должны отображаться независимо. Если же только в одном, тогда пусть свойство show содержит ссылку на соответствующий элемент массива или его индекс/id.

Comments

[Intelix]

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

может есть какое-то событие, чтобы к нему метод подвязать