Is there a way to toggle between two images by triggering a function on click event for different list items? Currently, all the list items display the same image because of a global value. How can I modify the code to toggle the images individually for each item?
var app = new Vue({
el: '#app',
data: function() {
return {
val:true,
selectedImg:"",
checked: "@/assets/images/check.png",
unchecked: "@/assets/images/uncheck.png",
items: [
{ message: 'laundry' },
{ message: 'cooking' },
{ message: 'cleaning'}
]
}
},
methods: {
myfunc () {
this.val = (this.val === true ? false : true)
if(this.val === true) {
this.selectedImg = this.checked
} else {
this.selectedImg = this.unchecked
}
},
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<ul>
<li v-for="item in items" :key="item.message">
<button @click="myfunc"><img :src="selectedImg"/></button>
{{ item.message }}
</li>
</ul>
</div>