Vue - переключить одно изображение в массив v-for

Question

У меня есть этот массив, я использую v-for для создания 3 столбцов информации. В каждом столбце есть изображение. При наведении курсора мыши на 1 столбец / изображение я хочу изменить ТОЛЬКО это изображение, а не все остальные. Как я могу выполнить sh это с помощью 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>

Я думаю, что могу каким-то образом нацелить изображение по его индексу , но мне не повезло.

Есть идеи о том, что я могу сделать?

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.