Vue - switch one image in v-for array of images

Question

I have this array I'm using v-for to create 3 columns of info. In each column is an image. When I mouse over 1 column/image I want to change JUST that image, none of the others. How can I accomplish this with Vue?

My Vue code looks like this:

<v-row
  align="center"
  justify="center"
>
  <v-col cols="4"
    v-for='(billingPlan, index) in billingPlans.basicPlans' 
    :key='billingPlan.id'
  >
    <v-img 
      :src="whichRose"
      @mouseenter="switchRose(index)"
    >
  </v-col>
</v-row>

I'm thinking I can somehow target the image by its index, but I'm not having any luck.

Any ideas on what I can do?

Where is whichRose coming from? If that is a computed property, you should be able to dynamically change what that property evaluates to. — jacob13smith
– jacob13smith, Commented Jan 21, 2020 at 23:05
whichRose is a data element, but switchRose is a computed property that I'm trying to use to update whichRose if that makes sense — ToddT
– ToddT, Commented Jan 21, 2020 at 23:08
Your configuration will never work then. A single whichRose data element will be the same for all columns. — jacob13smith
– jacob13smith, Commented Jan 21, 2020 at 23:15

jacob13smith · Accepted Answer · 2020-01-22 17:58:28Z

2

Maybe something like this will work?

<v-row
  align="center"
  justify="center"
>
  <v-col cols="4"
    v-for='(billingPlan, index) in billingPlans.basicPlans' 
    :key='billingPlan.id'
  >
    <v-img 
      :src="billingPlan.hovered ? billingPlan.image2 : billingPlan.image1"
      @mouseenter="billingPlan.hovered = true"
    >
  </v-col>
</v-row>

Would also need to add functionality if you want the image to change when you hover away.

Edit: To ensure proper reactivity, each billingPlan should have the property hover initiated to 0 before the component is created so that the reactive src attribute knows to rerender when hover changes.

edited Jan 22, 2020 at 17:58

answered Jan 21, 2020 at 23:21

jacob13smith

9295 silver badges12 bronze badges

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

1 Comment

ToddT Over a year ago

nothing but awesome! great idea, worked like a champ! thanks so much

Collectives™ on Stack Overflow

Vue - switch one image in v-for array of images

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related