Intento mostrar los datos cuando es cierto, pero no funciona. Quiero hacer un menú de acordeón (después de hacer clic en una pregunta, alternar una propiedad abierta y mostrar la respuesta si es verdadera)
Aquí está el código:
<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>Y datos:
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, }]¿Alguien puede ayudar y explicar por qué en el registro de la consola cambia a verdadero => falso y viceversa, pero no muestra los datos cuando es verdadero? Soy nuevo en Vue.
tu código está funcionando hermano. Corrí en mi computadora.
si preguntaste 'por qué verdadero->falso y falso->'. verdadero y falso es una variable booleana.
<div class="card-header" @click="item.open = !item.open">y esta línea que hiciste
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.¿Qué es esta exclamación (!) en vue?
!(false) // true !(true) // falseSu propiedad dataBase no es reactiva, debe usar ref para que sea reactiva:
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, }])