如何根据条件为value中的单个v-for项设置样式?

Question

我正在制作一个多项选择测验游戏，并希望用户点击更改为红色或绿色取决于答案是否正确或不正确。我创建了一个名为selected的变量，这是用户按下的-这可以正确更新。我还让所有的v-for项都变成了相同的颜色，这取决于答案是否正确，我只需要帮助分离它，这样只有一个v-for的东西会改变颜色。

这是我的相对HTML:

<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>

这是相对JS:

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";
};
};

这里是一些CSS:

.answer {
width: 100%;
background-color: #dbdbdb;
padding: 4% 2%;
margin: 1 0;
}
.answer:hover {
background-color: #c2c2c2
}

我还没试过那么多。我不知道该尝试什么。在一个不同的项目中，我根据其他div被选中的内容做了不同的div样式，但我不确定如何改变v-for的一部分，或者如果它甚至是可能的。

Thanks in advance

Answer 1

可以设置显示颜色样式的条件:

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>