CODEWITHSUNDEEP
vue.js
Jordash
Jordash

Reputation: 3103

How to set a temporary variable in VueJS v-for loop

I have a v-for loop like this

<div v-for="deal in deals">
  <div class="title">{{deal.title}}</div>
</div>

I'm trying to set a variable of a hover state, this is what I tried:

<div v-for="deal in deals" @mouseover="deal.hover = true" @mouseout="deal.hover = false">
  <div class="title">{{deal.title}}</div>
  <div class="description" v-if="deal.hover">{{deal.description}}</div>
</div>

Note that deal.hover is undefined by default (and it can't be pre-defined as false).

Is something like this possible in VueJS?

Upvotes: 0

Views: 309

Answers (1)

chash
chash

Reputation: 4433

I'm not sure what you mean by "temporary" variable. Your code is attempting to add a hover property to each deal. You can certainly do that.

<div v-for="deal in deals"
     @mouseover="$set(deal, 'hover', true)"
     @mouseout="$set(deal, 'hover', false)"
  <div class="title">{{deal.title}}</div>
  <div class="description" v-if="deal.hover">{{deal.description}}</div>
</div>

Note the use of $set to add a reactive property to an object (see https://v2.vuejs.org/v2/guide/reactivity.html#For-Objects).

Upvotes: 1

Related Questions