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