vue js在v-for中选择框

Question

另一个Vue JS问题

我有以下

<div v-for="benefit in benefits" track-by="$index" class="Quote__list">
 <div class="Benefit Form--default">
  <select v-model="benefitType" @change="updateBenefitItem($index)">
    <option value="Teacher" selected>Teacher</option>
    <option value="Care Taker">Care Taker</option>
    <option value="Support Staff">Support Staff</option>
  </select>
 </div>
</div>

我有3项福利，所以我得到3个选择框。在我的更改方法上，它甚至会记录所选的正确项目

updateBenefitItem(n)
{
  console.log(this.benefitType)
},

我的问题是我页面上所有选择框中的值都更新为相同的值，我需要知道如何将循环中的选择框视为个体。

有一种简单的方法可以达到这个目的吗？

谢谢Sam

Answer 1

https://jsfiddle.net/gurghet/5y19e9oc/4/

v-model="benefitType[$index]"

在用作v-model

的阵列上使用索引