[Vuejs]-Vue.js – Toggle clicked icon in v-for generated list

by

0👍

✅

You can fix this by adding activeIcon property to each todo item and toggle them specifically like:

data: {
   todos: [
    { text: "Learn JavaScript", id: "Location4", activeIcon: false },
    { text: "Learn Vue", id: "Location3", activeIcon: false },
    { text: "Play around in JSFiddle", id: "Location2", activeIcon: false },
    { text: "Build something awesome", id: "Location1", activeIcon: false }
  ]
}

and the update starLocation method like:

starLocation(id) {
  try {
     var todo = this.todos.find(t => t.id === id)
     todo.activeIcon = !todo.activeIcon;
  } catch (error) {
    alert(error);
  }
}

and finally update your template like:

<p 
  @click="starLocation(item.id)"
  :class="{ activeIcon: item.activeIcon}"
  :key="item.id"> STAR
</p>

Working Demo

Leave a comment