CODEWITHSUNDEEP
javascriptvue.jsvuejs2
blackrox
blackrox

Reputation: 231

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

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

Upvotes: 4

Views: 682

Answers (2)

Nikola Pavicevic
Nikola Pavicevic

Reputation: 23480

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>

Upvotes: 1

UdithIshara
UdithIshara

Reputation: 425

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>

Upvotes: 0

Related Questions