CODEWITHSUNDEEP
javascriptvue.jsvuetify.js
Nina
Nina

Reputation: 97

Change just the first icon in a v-list-item using vuetify

I have a list of items, for each item it is an icon before. I want to change the icon from an empty circle to an checked circle when I click it. But when I click the first icon all the icons are being checked because they have the same v-model. How can I make that when I click the first icon, just the first icon changes? This is what I have:

    <v-list-item v-for="(item, index) in itemSubtasks" :key="index">
                <v-list-item-action style="padding-top: 20px;">
                  <v-icon v-show="showDoneSub" @click="clickSubtask"> mdi-circle-outline
                  </v-icon>
                  <v-icon v-show="showUnDoneSub" @click="unDoneSubtask">
                    mdi-checkbox-marked-circle-outline </v-icon>
                </v-list-item-action>
                <v-list-item-content>
                  <v-list-item-title>
                    <v-text-field v-model="item.title"></v-text-field>
                  </v-list-item-title>
                </v-list-item-content>
              </v-list-item>

These are declared:

    itemSubtasks: [{
        title: 'My custom subtask 1',
      },
      {
        title: 'My custom subtask 2',
      },
    ],
    showDoneSub: true,   //empty circle
    showUnDoneSub: false,   //circle checked

These are the methods:

  clickSubtask() {
    this.showDoneSub = false
    this.showUnDoneSub = true
  },
  unDoneSubtask() {
    this.showDoneSub = true
    this.showUnDoneSub = false
  },

This is what I need

Upvotes: 0

Views: 544

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

Define a property called currentDoneIndex then update using the click icon index:

     <v-icon v-if="currentDoneIndex!==index" @click="clickSubtask(index)"> mdi-circle-outline
          </v-icon>
    <v-icon v-ele @click="unDoneSubtask(index)">
                mdi-checkbox-marked-circle-outline </v-icon>

in data object:

 currentDoneIndex:-1

in methods:

 clickSubtask(index) {
   this.currentDoneIndex = this.currentDoneIndex===index?-1:index
  },
  unDoneSubtask() {
     this.currentDoneIndex==-1
  },

Upvotes: 1

Related Questions