Vue封装InputField组件checkbox绑定v-model仅返回布尔值未取预设value

这是Vue对复选框v-model的默认绑定逻辑导致的：

• *当你给复选框绑定v-model时，如果没有通过专属属性指定自定义绑定值，v-model的取值永远是纯布尔值：勾选为true、未勾选为false
• 你写在input上的value="Yes"只是原生HTML的input默认属性，完全不会被Vue的v-model取值逻辑读取，自然无法在Devtools里捕获到对应字符串值
• 你在组件data中初始化的value: null也会被v-model的双向绑定直接覆盖，全程走的都是布尔值的更新逻辑，根本没有触发字符串值的存储。

不需要改动父组件的调用逻辑，只要在通用InputField组件的复选框分支做2处调整即可：

1. 替换掉无作用的硬编码value="Yes"，改用Vue为可勾选控件提供的专属绑定属性true-value（勾选时的绑定值）、false-value（未勾选时的绑定值）来定义自定义字符串取值
2. 把组件data中本地value的初始值，从null改成未勾选对应的默认值

调整后的复选框input代码片段示例：

<div v-if="type == 'checkbox' || type == 'radio'" class="checkables">
  <label class="label">
    <!-- 去掉原有的value="Yes"，替换为专属绑定属性 -->
    <input 
      :type="type" 
      :name="name" 
      :id="id" 
      v-model="value"
      true-value="Yes"
      false-value="No"
    />
    <span v-if="label" class="ml-1">{{ label }}</span>
  </label>
</div>

调整对应的script部分：

data() {
  return {
    // 初始值改为未勾选时的对应值，不再设为null
    value: 'No'
  }
}

调整完成后再查看Vue Devtools，勾选时本地value就会存为字符串"Yes"，未勾选时存为字符串"No"，完全匹配你预设的取值逻辑。如果后续需要给不同的复选框配置不同的自定义绑定值，也可以把true-value/false-value抽成组件的props，给个默认值，调用时按需传参即可。

内容的提问来源于stack exchange，提问作者Mr.Singh