How to hide a specific Vue element without binding to a variable?

Question

JavaScript

There is a project with drop down lists (FAQ). I wanted to organize the disclosure of the list by clicking. I know how to do it in JS, but I would like to use Vue. How can I make it so that the list that I clicked opens. If you bind to one variable, then all will be opened.

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>