[Vuejs]-Vue3 composition API accordion menu, problem with showing data

by

0👍

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

0👍

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,
  }])

Leave a comment