Vue3 как показать скрыть элемент внутри v-for?

Question

[Nentra]

На фронт приходит массив с данными, я нажимаю на элемент и у меня под всеми элементами сформированными с помощью v-for выводятся эти пришедшие данные, а мне нужно чтобы эти данные показывались только под элементом который я нажал.

Как это сделать?
В какую сторону копать?

Comments

[Wispik]

добавить к данным значение show: false. При клике меняй значение на true и выводи данные через v-if="show" или v-show="show"

Answer 1

[0xD34F]

Показываем не более одного - добавляем в компонент свойство, которое будет содержать id, индекс или ещё что-то уникальное для каждого из элементов данных (да хоть бы и ссылку на сам элемент). Показываем скрытое в зависимости от равенства значения этого свойства тому, что доступно в текущей итерации v-for.

Или, показываем несколько сразу - создаём отдельный компонент, в экземпляры которого будут передаваться элементы данных. Внутри компонента свойство, в зависимости от значения которого (истина-ложь) показываем или скрываем чего там надо.

Answer 2

[Антон Антон]

Вместо

const items = ref([{...}])
const data = ref([])

сделай

const items = ref([{..., itemData: []}])

и заполняй (и выводи внутри f-vor) itemData конкретного item