Vuetify复选框绑定自定义值后未正确显示选中状态求助

问题核心 #

你遇到的问题是：绑定getActiveQuote.isSDIS到v-checkbox后，即便值等于'1'（对应设置的true-value），复选框仍未显示选中。本质是自定义值绑定的响应式同步或类型匹配问题，且受限于后端要求不能改用布尔值。

解决方案 #

方案1：确保初始值被响应式追踪 #

如果getActiveQuote是从后端异步获取的对象，直接添加isSDIS属性可能无法被Vue响应式系统识别。需在初始化时就包含该属性，或用Vue.set手动注册：

// 示例：在获取后端数据时初始化
async fetchQuote() {
  const data = await api.getQuote();
  // 确保isSDIS属性存在并被响应式追踪
  this.getActiveQuote = {
    ...data,
    isSDIS: data.isSDIS ?? '0' // 兜底默认值
  };
}

// 若后续动态添加属性，用Vue.set
// Vue.set(this.getActiveQuote, 'isSDIS', '1');

方案2：修正模板绑定的细节 #

确认模板中自定义值的绑定语法正确，同时确保getActiveQuote.isSDIS的类型是字符串而非数字：

<v-checkbox 
  v-model="getActiveQuote.isSDIS"
  :false-value="'0'"
  :true-value="'1'"
></v-checkbox>
{{ getActiveQuote.isSDIS }} {{ typeof getActiveQuote.isSDIS }}

注：如果后端返回的是数字1/0，需先转换为字符串再赋值给getActiveQuote.isSDIS。

方案3：用计算属性做中间转换（推荐） #

通过计算属性在布尔值和字符串值之间做映射，避开自定义值绑定的潜在问题，同时满足后端格式要求：

<v-checkbox 
  v-model="isSDISChecked"
></v-checkbox>
{{ getActiveQuote.isSDIS }} {{ typeof getActiveQuote.isSDIS }}

computed: {
  isSDISChecked: {
    get() {
      return this.getActiveQuote.isSDIS === '1';
    },
    set(val) {
      this.getActiveQuote.isSDIS = val ? '1' : '0';
    }
  }
}

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