Estoy creando un juego de preguntas de opción múltiple y quiero que lo que el usuario hizo clic cambie a rojo o verde dependiendo de si la respuesta es correcta o incorrecta. Hice una variable llamada seleccionada, que es lo que presionó el usuario, esto se actualiza correctamente. También tengo todos los elementos de v-for para cambiar al mismo color dependiendo de si la respuesta es correcta o no, solo necesito ayuda para separarlo para que solo uno de los elementos de v-for cambie de color.
Aquí está mi HTML relativo:
<button type="button" class="btn" class="answer" v-for="option in options" @click="checkAnswer(option)" @click="selected = option" :style="{backgroundColor: colour}"> {{option}}<br/> </button> <button type="button" @click="getQ" @click="shuffle(options)" class="btn button next">Next</button>Aquí está el JS relativo:
let colour = Vue.ref(''); let selected = Vue.ref(''); let options = Vue.ref([correctAnswer, incorrectAnswerOne, incorrectAnswerTwo, incorrectAnswerThree]); // Methods let shuffle = function(options) { let num = options.length, t, raInt; //while there are remaining elements to shuffle while (num) { //choose random raInt = Math.floor(Math.random() * num--); //swap with current element t = options[num]; options[num] = options[raInt]; options[raInt] = t; } return options; }; let checkAnswer = function(clicked) { console.log(clicked.value); console.log(correctAnswer.value); if (clicked.value == correctAnswer.value) { // checks if the button that was clicked is the same as the answers value this.result = "Correct!"; //if it does, result changes to Correct! this.colour = "green"; } else { this.result = "Incorrect!"; //if the answer is incorrect, result changes to Incorrect! this.colour = "red"; }; };Y aquí hay algo de CSS:
.answer { width: 100%; background-color: #dbdbdb; padding: 4% 2%; margin: 1 0; } .answer:hover { background-color: #c2c2c2 } Realmente no he probado mucho. No estoy seguro de qué probar. En un proyecto diferente, diseñé un div diferente en función de qué otro div se seleccionó, pero no estoy seguro de cómo cambiar solo una parte de un v-for , o si es posible.
Gracias por adelantado
Puede establecer condiciones para mostrar el estilo de color:
const { ref, computed } = Vue const app = Vue.createApp({ setup() { let correctAnswer = 3 let incorrectAnswerOne = 1 let incorrectAnswerTwo = 2 let incorrectAnswerThree = 4 let colour = ref(''); let selected = ref(''); let options = ref([correctAnswer, incorrectAnswerOne, incorrectAnswerTwo, incorrectAnswerThree]); let shuffled = ref([]) let shuffle = (array) => { selected.value = null let currentIndex = array.length, randomIndex; while (currentIndex != 0) { randomIndex = Math.floor(Math.random() * currentIndex); currentIndex--; [array[currentIndex], array[randomIndex]] = [ array[randomIndex], array[currentIndex]]; } shuffled.value = array; }; shuffle(options.value) let checkAnswer = function(clicked) { // 👇 set selected selected.value = clicked if (clicked == correctAnswer) { this.result = "Correct!"; this.colour = "green"; } else { this.result = "Incorrect!"; this.colour = "red"; }; }; return { colour, selected, options, shuffle, checkAnswer, shuffled } }, }) app.mount('#demo') .answer { width: 100%; background-color: #dbdbdb; padding: .5em 2em; margin: 1 0; } .answer:hover { background-color: #c2c2c2 } .btns { display: flex; } <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script> <div id="demo"> <div class="btns"> <div v-for="(option, i) in shuffled" :key="i" > <!-- 👇 condition --> <button class="answer" @click="checkAnswer(option)" :style="selected == option && {backgroundColor: colour}"> {{option}}<br/> </button> </div> </div> <button type="button" @click="getQ, shuffle(options)" class="btn button next">Next</button> </div>