Как скрыть определенный элемент Vue без привязки к переменной?

Question

[sldo_ru]

Есть проект с раскрывающимися списками (FAQ). Хотел организовать раскрытие списка по нажатию. Как сделать на JS - знаю, но хотелось бы методами Vue. Как можно сделать так, чтобы открывался список, на который я нажал. Если привязывать к одной переменной, то будут открываться все.

Comments

[0xD34F]

Этот вопрос здесь задавался десятки раз. Учитесь пользоваться поиском.

[sldo_ru]

0xD34F, я вижу в ответах только привязку к одной переменной в data, смысл делать для каждого списка свою переменную?

Answer 1

[Илья]

<template>
	<div v-for="(item, index) in items" :key="index">
		<span @click="item.open = !item.open">{{ item.question }}</span>
		<span v-if="item.open">{{ item.answer }}</span>
	</div>
</template>
<script>
export default {
	data: {
		faqs: [
			{
				open: false,
				question: '...',
				answer: '...',
			},
		],
	},
}
</script>