Vuetify on mouseover toggle data object within array list

Question

I am trying to implement a functionality which will toggle a Vuetify badge element for each array object within the list when the containing div has been hovered over.

I am able to create a hover like functionality within v-for array list using css, which is fairly simple but how can I achieve similar outcome using vuetify components? As I have not found any questions discussing this or demonstrating it, assume it is possible. Have looked into

And much more but have not found similar enough example of what I desire.

I have added codepen example of what I currently have. The badge should only appear on the element which is currently being hovered, however all badge elements are being executed when any element has been hovered on.

CodePen Link

Maybe I have missed out something obvious

HTML Part

  <template>
   <div id="app">
      <div>My favourite fruit is <b>{{favouriteFruit}}</b></div> <br>

   <div v-for="(dataArray, index) in testArray" @click="setCurrent(dataArray.name)">
      <v-badge
              :color="computedFavFruitColor[index]"
              right
              v-model="show"
      >
         <template v-slot:badge>
            <span><v-icon color="#ECF0FF">{{computedFavFruit[index]}}</v-icon></span>
         </template>
        <div @mouseover="show = true" @mouseleave="show = false">
           {{dataArray.name}}
        </div>
      </v-badge>

   </div>
   </div>
</template>

Any further help of suggestions regarding this manner would be appreciated.

dreijntjens · Accepted Answer · 2019-09-03 11:46:39Z

1

While the show property is global, it counts for every item you hover. You want to target the element you hover. So I suggest to keep track of the index of the item you hover like this: https://codepen.io/reijnemans/pen/JjPrayp?editors=1010

    <div v-for="(dataArray, index) in testArray" @click="setCurrent(dataArray.name)">
      <v-badge
              :color="computedFavFruitColor[index]"
              right
      >
         <template v-slot:badge>
            <span v-if="show == index"><v-icon color="#ECF0FF">{{computedFavFruit[index]}}</v-icon></span>
         </template>
        <div @mouseenter="show = index" @mouseleave="show = null">
           {{dataArray.name}}
        </div>
      </v-badge>

   </div>

And show = null ipv show = true in data block of vue

answered Sep 3, 2019 at 11:46

dreijntjens

4,84528 silver badges30 bronze badges

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

Collectives™ on Stack Overflow

Vuetify on mouseover toggle data object within array list

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related