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

Question

I'd like to make a big change to this code. But it doesn't work the way I want it to.

<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>

And this is the code I changed.

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>

And codeVo.codeObsTypeList is like this.

Answer 1

You can v-value="item.key" change to :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>