Vue项目v-for循环内v-model指令无法生效的问题求助

核心问题定位 #

当前代码无法正常工作的最主要原因是radio输入框未绑定实际值：v-model 绑定单选框时，需要同步指定每个单选框对应的value值，组件会根据这个value值和绑定的响应式变量做匹配，判断哪个单选框处于选中状态，同时在选中时把对应value写入绑定变量。当前代码没有给input设置:value属性，浏览器既不知道选中后要回传什么值给cart.variantId，也无法正确匹配选中态。

分步修复方案 #

• 给单选框补充对应的值绑定，把变体的唯一标识data.id作为radio的value值，保证选中时能正确同步id到cart.variantId
• 增加渲染兜底判断，因为product是从Vuex读取的异步数据源，要在v-for外层加非空判断，避免初始状态下product为null/undefined时遍历报错、打断渲染流程
• 统一字段值的类型匹配，v-model对单选框的选中判断是严格相等匹配，要保证data.id的类型和cart.variantId的存储类型一致，避免出现数字、字符串类型混用导致的选中态不匹配问题

修复后参考代码 #

模板部分 #

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

脚本部分 #

原有逻辑基本无需调整，仅需确认初始化的cart对象所有字段都是预先声明的，不要后续动态嵌套新增属性，避免丢失响应式追踪：

data(){
  return {
    cart: {
      quantity: '1',
      colorId: '',
      variantId: '',
    },
  }
},
computed: {
  product(){
    return this.$store.state.quickViewProduct;
  },
},

内容的提问来源于stack exchange，提问作者Shafayet Al-Anik