我的 Vue 项目 v-model 在 v-for 循环中不起作用

Question

我有一个问题，v-model 在 v-for 循环中不起作用。

在我的模板里面

<li v-for="(data, key) in product.variants" :key="data.id">
   <input type="radio" :id="'variant' + key" name="Variant" v-model="cart.variantId"/>
   <label :for="'variant' + key">{{data.variant}}</label>
</li>

在我的脚本里面

data(){
   return{
     cart: {
         quantity: '1',
         colorId: '',
         variantId: '',
      },
   },

   computed: {
      // Get Quick View Product
      product(){
         return this.$store.state.quickViewProduct;
      },
   },

},

现在我如何解决这个问题

Answer 1

如果您要存储一组收音机中的值。 属性中的按钮，您需要识别按钮。 不是用 id，而是用一个值。 尝试这个：

<li v-for="(data, key) in product.variants" :key="data.id">
   <input type="radio" :id="'variant' + key" name="Variant" v-model="cart.variantId" :value="data.id"/>
   <label :for="'variant' + key">{{data.variant}}</label>
</li>