How to toggle two icons in v-for list item in Vue-CodePudding

I have a list of items and icons which I want to toggle. How should I do that? Right now my click affects all of the items.

<ion-item
        v-for="course in courses"
        :key="course.id">
  <ion-label >{{ course.name }}</ion-label>
  <span @click="toggleIcons">
    <ion-icon v-if="isSelected" :icon="ellipseOutline" slot="end"></ion-icon>
    <ion-icon v-else :icon="checkmarkCircleOutline" slot="end"></ion-icon>
  </span>
</ion-item>


///


data() {
    return {
        isSelected: false,
        }
    },
methods: {
    toggleIcons(){
        this.isSelected = !this.isSelected
    }
}

CodePudding user response：

Try like following snipet:

new Vue({
  el: "#demo",
  data() {
      return {
        courses: [{id:1, name: 'aaa'}, {id:2, name: 'bbb'},{id:3, name: 'ccc'}],
        isSelected:  null
      }
    },
    methods: {
      toggleIcons(id){
        this.isSelected === id ? this.isSelected=null : this.isSelected = id
      }
    }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <div v-for="course in courses" :key="course.id">
    <label >{{ course.name }}</label>
    <button @click="toggleIcons(course.id)">
    click
      <div v-if="isSelected === course.id " slot="end">1</div>
      <div v-if="isSelected !== course.id " slot="end">2</div>
    </button>
  </div>
</div>

CodePudding user response：

Best thing to do is have a data property to keep the index(or the course.id in your case) of the "toggled" button

And then @click set the course.id of the clicked item to the data property, after that you can match the data property to the course.id and show your icon

Check the example below

Data Property

  data() {
    return {
      selectedCourseId: null,
    }
  },

Method to set (or you can set it inline)

  methods: {
    setSelectedCourseId(id) {
      this.selectedCourseId = id
    },
  }

Template

<ion-item v-for="course in courses" :key="course.id">
  <ion-label >{{ course.name }}</ion-label>
  <span @click="toggleIcons">
    <ion-icon v-if="selectedCourseId === course.id" :icon="ellipseOutline" slot="end"></ion-icon>
    <ion-icon v-else :icon="checkmarkCircleOutline" slot="end"></ion-icon>
  </span>
</ion-item>