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)
},

如何在点击时更改Vuejs v-for循环中的prepend-icon？

1 个答案: