He creado botones dinámicos en vuejs donde cada botón representa una respuesta diferente a una pregunta.
Mi objetivo es: cuando respondo mal, la opción correcta se resalta en verde hasta que se muestra la siguiente pregunta.
¿También es posible cambiar otras configuraciones de estos "BaseButtons" con CSS? ¿Cómo puedo hacer esto?
<template> <div class="container-botoes"> <BaseButton class="optionsButtons" v-for="options in optionsAnswers" :key="options.id" @click="handleAnswer(options)"> {{options.ans}} </BaseButton> </div> </template> methods:{ handleAnswer(options){ if (options.id === this.correctAnswer){ this.playerHit = true; } else { this.opponentHit = true; } this.nextquestion(); },Mira este:
Bloque HTML:
<template> <div class="container-botoes"> <BaseButton v-for="(options, index) in optionsAnswers" :key="options.id" class="optionsButtons" :class="correctAnsIndex === index ? 'green-button' : 'red-button'" @click="handleAnswer(options, index)" > {{ options.ans }} </BaseButton> </div> </template>Bloque JavaScript:
<script> export default { data() { return { correctAnsIndex: null, } }, methods: { handleAnswer(options, index) { if (options.id === this.correctAnswer) { this.playerHit = true this.correctAnsIndex = index } else { this.opponentHit = true this.correctAnsIndex = null } this.nextquestion() }, }, } </script>bloque CSS:
<style> .red-button { background: red; color: white; font-weight: 700; } .green-button { background: green; color: white; font-weight: 700; } </style>Explicación del código:
Hemos pasado el index del bucle en el método handleAnswer , donde el valor del index se asignará a la variable correctAnsIndex if options.id === this.correctAnswer y en la otra parte asignaremos valor null a la variable correctAnsIndex .
Ahora, hemos aplicado clases condicionales en el bloque HTML, donde si el index y el correctAnsIndex coinciden, entonces aplicaría la clase green-button o, de lo contrario, aplicaría la clase red-button .
Consiguiendo finalmente el resultado esperado.
Prueba esto :
Vue.component('basebutton', { data() { return { isCorrect: false } }, props: ['answerobj'], template: `<button :class="{ 'green': isCorrect, 'white': !isCorrect}" @click="handleAnswer(answerobj)">{{ answerobj.answer }}</button>`, methods: { handleAnswer(answerobj) { if (answerobj.correct) { this.isCorrect = true } else { this.isCorrect = false } } } }); var app = new Vue({ el: '#app', data: { list: [{ question: 'Who is the tallest animal ?', optionsAnswers: [{ answer: 'Elephant', correct: false }, { answer: 'Jirafe', correct: true }, { answer: 'Lion', correct: false }, { answer: 'Zebra', correct: false }] }] } }); .green { background-color: green; } .white { background-color: white; } <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <div v-for="(item, index) in list" :key="index"> <p><strong>Question : </strong>{{ item.question }}</p> <p><strong>Answers :</strong></p> <BaseButton v-for="(options, i) in item.optionsAnswers" :key="i" :answerobj="options"> </BaseButton> </div> </div>Una opción es crear clases css con los estilos que necesita y agregarlos al componente BaseButton según sus condiciones