Tengo una matriz con datos. Por defecto, solo el primer elemento debe ser visible.
Al hacer clic en el botón SÍ o NO, necesito mostrar el elemento cuya identificación corresponde a sí_sección o no_sección (según el botón en el que se hizo clic)
Por ejemplo, si en el bloque Ejemplo 1 hacemos clic en el botón "no 4", entonces el bloque Ejemplo 4 aparece debajo, y si hacemos clic en "sí 2", entonces debería aparecer el bloque Ejemplo 2.
¡Gracias por adelantado! =)
new Vue({ el: "#app", data:{ stepsData: [ { id: "1", yes_section: "2", no_section: "4", name: "Example 1" }, { id: "2", yes_section: "5", no_section: "3", name: "Example 2" }, { id: "3", yes_section: "2", no_section: "4", name: "Example 3" }, { id: "4", yes_section: "2", no_section: "4", name: "Example 4" }, { id: "5", yes_section: "2", no_section: "4", name: "Example 5" }, ] } }); .step { background: #ccc; padding: 20px; margin-bottom: 15px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <div v-for="(step, id) in stepsData" :key="step.id" class="step" > <div class="legal-aid__step-question" v-html="step.name"></div> <button>YES {{ step.yes_section }}</button> <button>NO {{ step.no_section }}</button> </div> </div>Debe guardar step_id y usar propiedades calculadas ( https://vuejs.org/v2/guide/computed.html ) para mostrar la información del paso necesario
new Vue({ el: "#app", data: () => ({ active_step_id: "1", stepsData: [ { id: "1", yes_section: "2", no_section: "4", name: "Example 1" }, { id: "2", yes_section: "5", no_section: "3", name: "Example 2" }, { id: "3", yes_section: "2", no_section: "4", name: "Example 3" }, { id: "4", yes_section: "2", no_section: "4", name: "Example 4" }, { id: "5", yes_section: "2", no_section: "4", name: "Example 5" }, ] }), computed: { active_step() { return this.stepsData.find(step => step.id === this.active_step_id) } } }); .step { background: #ccc; padding: 20px; margin-bottom: 15px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <div class="step" > <div class="legal-aid__step-question" v-html="active_step.name"></div> <button @click.prevent="active_step_id = active_step.yes_section">YES {{ active_step.yes_section }}</button> <button @click.prevent="active_step_id = active_step.no_section">NO {{ active_step.no_section }}</button> </div> </div>