javascript - Vue - 在 v-for 图像数组中切换一个图像

Question

我有这个数组v-for用于创建 3 列信息。每列中都有一张图片。当我将鼠标悬停在 1 列/图像上时，我只想更改该图像，其他的都不更改。我如何使用 Vue 来实现这一点？

我的 Vue 代码如下所示：

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

我想我可以通过索引以某种方式定位图像，但我没有任何运气。

关于我能做什么的任何想法？

标签： javascriptvue.jsvuejs2

Answer 1

也许这样的事情会奏效？

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

如果您希望在悬停时更改图像，还需要添加功能。

编辑：为了确保正确的反应性，每个都billingPlan应该在hover创建组件之前将属性初始化为 0，以便反应性src属性知道在hover更改时重新呈现。