使用 vue.js 时，如果与 v-for 重复，单选按钮不会正常映射到 v-model答案

【问题标题】：When using vue.js, the radio button is not mapped to the v-model normally if repeated with v-for使用 vue.js 时，如果与 v-for 重复，单选按钮不会正常映射到 v-model
【发布时间】：2021-02-26 08:03:25
【问题描述】：

我想对此代码进行重大更改。但它并没有按照我想要的方式工作。

<td>
    <label>
        <input type="radio" v-model="options.prdtType" value="CODE001">
        <i></i>
        <span class="txt">A</span>
    </label>
    <label>
        <input type="radio" v-model="options.prdtType" value="CODE002">
        <i></i>
        <span class="txt">B</span>
    </label>
    <label>
        <input type="radio" v-model="options.prdtType" value="CODE003">
        <i></i>
        <span class="txt">C</span>
    </label>
</td>

这是我更改的代码。

data: {
    codeVo: {
        codeObsTypeList: [],                
              
    },
    ...
    userParam: {                              
        prdtType: '',                    
    }
 ...

<td>
    <label class="radio_custom" v-for="(item, index) in codeVo.codeObsTypeList" :key="index">
        <input type="radio" v-model="userParam.prdtType" v-value="item.key">
        <i></i>
        <span class="txt" v-text="item.txt"></span>
    </label>
</td>

而codeVo.codeObsTypeList是这样的。

【问题讨论】：

CodeSandbox 有机会吗？

标签： javascript html vue.js

【解决方案1】：

您可以将v-value="item.key" 更改为:value="item.key。

<td>
    <label class="radio_custom" v-for="(item, index) in codeVo.codeObsTypeList" :key="index">
        <input type="radio" v-model="userParam.prdtType" :value="item.key">
        <i></i>
        <span class="txt" v-text="item.txt"></span>
    </label>
</td>

【讨论】：