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

user_9282866 0
Viewed 83

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 class="ion-text-wrap">{{ 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
    }
}
vuejs2 vue.js javascript
2 Answers

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 class="ion-text-wrap">{{ 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>

user_119891890

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 class="ion-text-wrap">{{ 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>
user_54851140
Related