Как изменить значок prepend в Vuejs v-for l oop при клике? - PullRequest
Новая
       46

Как изменить значок prepend в Vuejs v-for l oop при клике?

0 голосов
/ 12 января 2020

У меня есть список текстовых полей, визуализируемых с помощью 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)
    },

}

1 Ответ

1 голос
/ 12 января 2020

Прежде всего, ваш метод сохранения не работает должным образом. При рендеринге данных 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)
},
...