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

Question

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?

Why it can't be pre-defined as false ?

Niklesh Raut
– Niklesh Raut

2020-05-05 18:09:20 +00:00
Commented May 5, 2020 at 18:09 — Niklesh Raut
– Niklesh Raut, Commented May 5, 2020 at 18:09

tony19 · Accepted Answer · 2022-07-15 02:22:28Z

1

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).

edited Jul 15, 2022 at 2:22

tony19

140k23 gold badges281 silver badges354 bronze badges

answered May 5, 2020 at 18:03

chash

4,51316 silver badges30 bronze badges

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

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related