Блог

У меня есть список предметов, для каждого предмета это значок раньше. Я хочу изменить значок с пустого круга на отмеченный круг, когда я нажимаю на него. Но когда я нажимаю на первый значок, все значки проверяются, потому что у них одна и та же v-модель. Как я могу сделать это, когда я нажимаю на первый значок, меняется только первый значок? Это то, что у меня есть:

     <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>
 

Они объявлены:

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

Таковы методы:

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

Определите свойство, которое называется currentDoneIndex , а затем обновите, используя индекс значка щелчка:

      <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>
 

в объекте данных:

  currentDoneIndex:-1
 

в методах:

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