如何在点击时更改 Vuejs v-for 循环中的前置图标?

Question

我有一个使用 v-for 呈现的文本字段列表，在该文本字段中，我有一个三元的预置图标，可以在单击时更改其状态。我的问题是我每个图标都是独一无二的，我不知道如何定位它，所以在单击时它们可以单独更改。

我希望每个图标本质上都是一个独特的拨动开关。

<template>
<v-form v-model="valid">
<v-container>
<v-text-field label="Enter Question" v-model="question" />
<v-text-field label="Enter an Answer" v-for="(ele,id) in isAnswer" :key="id" :prepend-icon="isAnswer[id]?'mdi-check-box-outline':'mdi-checkbox-blank-outline'" @click:prepend="saveAns(isAnswer[id])" v-model="isAnswer[id]"/>
<v-card-actions>
<v-btn color="primary" @click='addToQuiz'>Add to Quiz</v-btn>
<v-btn color="primary" @click="saveAnswers">Save Answers</v-btn>
</v-card-actions>
<p v-for="(ele,id) in quizShow" :key='id'>{{ele.qObjQ}} {{ele.qObjAs}}</p>
<p>{{this.answers}}</p>
</v-card>
</v-row>
</v-container>
</v-form>
</template>
methods: {
saveAns(ansId){
this.saved = !this.saved
console.log(ansId)
},
}

Answer 1

首先，您的保存方法无法正常工作。在渲染 v-for 的数据时，您需要一个用于该保存的标志。所以save=false之后会在那里，

:prepend-icon="isAnswer[id].saved?'mdi-check-box-outline':'mdi-checkbox-blank-outline'"

和方法将是

saveAns(index){
this.isAnswer[index].save = !this.isAnswer[index].save
console.log(index)
},