0
148
VistasCómo cambiar varios elementos de datos a verdaderos uno a la vez en Vuejs
Soy muy nuevo en Vuejs y me pregunto cómo puedo hacer que esto funcione en Vuejs
Tengo un conjunto de datos diferentes:
data() { return { recents: false, frontend: false, backend: false, devops: false, tutoriais: false, }; }, Y cuando hago clic en un botón, invoca openOptions() y cambia una propiedad específica a verdadero o falso.
openOptions(e) { const optionClicked = e.target.text.toLowerCase(); this[optionClicked] = !this[optionClicked]; }, Sin embargo, no puedo tener 2 propiedades siendo verdaderas. Necesito configurar todo lo demás en false , pero me cuesta entender cómo puedo hacer que esto funcione. Así que básicamente lo que necesito es
set the one I clicked to true and the rest to falseAlguien me puede ayudar con eso?
1 Respuestas
Responde la pregunta0
Primero puede crear un objeto como una sola entidad, he usado un objeto con nombre como collection
Demo en vivo
data() { return { collection: { recents: false, frontend: false, backend: false, devops: false, tutoriais: false, }, }; },luego, puede adjuntar un oyente de clic en cada elemento (si lo desea, también puede adjuntar un oyente de un solo clic en su padre)
<button v-for="[key, value] in Object.entries(this.collection)" :key="key" v-on:click="() => openOptions(key)" > {{ key }} {{ value }} </button> cuando el usuario hace clic en cualquier button , solo su valor se establecerá en true y los demás son false como:
openOptions(clickedKey) { Object.keys(this.collection).forEach((key) => { this.collection[key] = key === clickedKey ? true : false; }); },