VueJS prevent to show a data in each v-for loop

Question

I have this working code here:

      <span v-for="(item, index) in storedUserItems">
        <template v-if="item.strength">
        <img @mouseover="itemInfo(item, index)" style="padding: 5px;background: black;border-radius: 5px;margin-top: 15px;margin-right: 15px;" :src="require('../assets/items/strength/'+item.img)">
        <span>{{itemPower}}</span>
        </template>
      </span>

Now the problem is that when I hover mouse over img all items power is displayed next to them. I need only display that item info on which mouse is over. How to solve this ?

Method:

methods: {
  itemInfo(item, index) {
    this.itemPower = item.power;
  },

Answer 1

Try to add a conditional rendering like :

  <span v-if="item.power==itemPower">{{itemPower}}</span>

or add a property called selectedIndex to your data object and update it as follows :

 methods: {
    itemInfo(item, index) {
      this.itemPower = item.power;
      this.selectedIndex=index;
     },

and in your template :

  <span v-if="selectedIndex==index">{{itemPower}}</span>