Vue复选框与单选框v-model绑定异常：仅返回'on'而非预期值

问题根源是你没有给复选框和单选框设置value属性，Vue在未指定value的情况下，会默认将选中状态的返回值设为字符串'on'，只要给每个输入框添加对应value就能解决需求。

修正要点： #

• 复选框：给每个<input type="checkbox">添加value属性，值对应你期望存入数组的字符串（'vue'、'react'、'angular'），Vue会自动帮你在frontendItems数组中添加/移除选中的value值。
• 单选框：给每个<input type="radio">添加value属性，同时要将两个单选框的name设为相同值（确保单选互斥），这样选中后whoAmI就能拿到对应的选项值（'developer'或'programmer'）。

修正后的完整代码： #

<template>
    <p>FrontEnd Items</p>

<label for="vue">Vue.js</label>
<input type="checkbox" name="frontend" id="vue" v-model="frontendItems" value="vue">

<label for="React">React.js</label>
<input type="checkbox" name="frontend" id="React" v-model="frontendItems" value="react">

<label for="Angular">Angular.js</label>
<input type="checkbox" name="frontend" id="Angular" v-model="frontendItems" value="angular">

<p>
    You have selected :- {{ frontendItems }}
</p>

<p>For radio Buttons</p>
<p>Who am I</p>
<label for="developer">Developer</label>
<input type="radio" name="identity" id="developer" v-model="whoAmI" value="developer">

<label for="programmer">Programmer</label>
<input type="radio" name="identity" id="programmer" v-model="whoAmI" value="programmer">

<p>
    I am :- {{ whoAmI }}
</p>
</template>

<script>
export default {
    name : 'CheckRadiobinding',
    data(){
        return {
            frontendItems:[],
            whoAmI : null
        }
    }
}
</script>

内容的提问来源于stack exchange，提问作者ARBIND KUMAR