How to bind value to each list item in Vue to toggle the images

Question

I'm trying to toggle between the 2 images by triggering a function on click event, as shown below, how do I apply the same idea to different list items to toggle the images individually for each item? right now, all the list items same image because of one global value i.e 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>

Burhan Savci · Accepted Answer · 2021-12-12 13:45:46Z

1

You should move selectedImg and val into items objects and pass item to myfunc function. You can also look at the answer in 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>

edited Dec 12, 2021 at 13:45

answered Dec 12, 2021 at 13:32

Burhan Savci

3961 gold badge5 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Amir Sarfar Over a year ago

Or you can even extract the logic to a new component of a custom checkbox :)

Collectives™ on Stack Overflow

How to bind value to each list item in Vue to toggle the images

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related