Vue3组合API手风琴菜单，显示数据的问题

Question

I try to show the data when it is true, but it doesn't work. I want to make an accordion menu (after clicking on a question, toggle an open property and show the answer if it's true)

Here is code:

<div class="accordion">
<h1 class="title">Frequently asked questions</h1>
<div class="wrapper">
    <div class="card" v-for="(item, i) in dataBase" :key="i">
      <div class="card-header" @click="item.open = !item.open">
        <h1>{{item.q}}</h1>
      </div>
      <div class="card-body" v-show="item.open">
        {{item.d}}
      </div>
    </div>
</div>

And data:

const dataBase = [{
  q: 'How much does it cost?',
  d: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
  open: false,
},
  {
    q: 'How it works?',
    d: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
    open: false,
  }]

Can anyone help and explain why in the console log it changes to true => false and vice versa, but doesn't show the data when it's true? Im new in Vue.

Answer 1

your code is working bro. i runned on my computer.

if you asked 'why true->false and false->'. true and false is boolean variable.

<div class="card-header" @click="item.open = !item.open">

and this line you did

item.open = !item.open // if item.open is true then here is false.
item.open = !item.open // if item.open is false then here is true.

what is this exclamation(?) in vue ?

!(false) // true
!(true) // false

Answer 2

Your dataBase property is not reactive, you should use ref to make it reactive:

import {ref} from 'vue'
const dataBase = ref([{
  q: 'How much does it cost?',
  d: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
  open: false,
},
  {
    q: 'How it works?',
    d: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
    open: false,
  }])