Javascript Vue-在v-for图像阵列中切换一个图像

我有一个数组，我正在使用

v-for

创建3列信息。每列中都有一个图像。当我将鼠标移到一列/图像上时，我只想更改该图像，而不想更改其他图像。如何使用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>

我想我可以通过索引来确定图像的目标，但我没有任何运气

---

关于我能做什么有什么想法吗？

也许像这样的事情会奏效

<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，以便在

hover

更改时，反应

src

属性知道重新命名。

何处是

whichRose

来源？如果这是一个计算属性，您应该能够动态更改该属性的计算结果。

whichRose

是一个数据元素，但是

switchRose

是一个计算属性，我正试图使用它来更新

whichRose

，如果这样做是合理的，那么您的配置将永远无法工作。一个单独的

，它的属性

数据元素对于所有列都是相同的。除了很棒之外，什么都没有！好主意，像冠军一样工作！非常感谢