Estoy tratando de alternar entre las 2 imágenes activando una función en el evento de clic, como se muestra a continuación, ¿cómo aplico la misma idea a diferentes elementos de la lista para alternar las imágenes individualmente para cada elemento ? en este momento, todos los elementos de la lista tienen la misma imagen debido a un valor global, es decir, val
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>Debe mover selectedImg y val a los objetos de elementos y pasar el elemento a la función myfunc . También puedes mirar la respuesta en codepen .
var app = new Vue({ el: '#app', data: function() { return { checked: "@/assets/images/check.png", unchecked: "@/assets/images/uncheck.png", items: [ { message: 'laundry', selectedImg:"" , val:true}, { message: 'cooking', selectedImg:"", val:true}, { message: 'cleaning', selectedImg:"", val:true} ] } }, methods: { myfunc (item) { item.val = (item.val === true ? false : true) if(item.val === true) { item.selectedImg = this.checked } else { item.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(item)"><img :src="item.selectedImg"/></button> {{ item.message }} </li> </ul> </div>