CODEWITHSUNDEEP
vue.jsiconstoggleuniquev-for
Aj Humphries
Aj Humphries

Reputation: 1

How to change prepend-icon in a Vuejs v-for loop on click?

I have a list of text fields being rendered with a v-for and in that text field, I have a prepended icon of a ternary in it that changes its state on click. My issue is that I each icon to be unique and I don't know how to target it so on click they can individually change.

I'd like each icon to essentially be a unique toggle switch.

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

}

Upvotes: 0

Views: 1008

Answers (1)

Zubaer Haque
Zubaer Haque

Reputation: 172

First of all, your save method is not working properly. In rendering data of v-for you need a flag for that save. so save=false will be there after that,

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

and method will be

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

Upvotes: 1

Related Questions