Vue中使用v-model绑定复选框时，如何将字符串类型的"true"/"false"转换为布尔值？

遇到这种API返回格式不匹配的情况很常见，加上直接用Boolean()会因为不是可赋值左值报错，这里给你两个最实用的解决办法：

方案一：从源头转换数据（推荐） #

最直接的方式是在获取API数据后，把字符串类型的"true"/"false"转换成布尔值再赋值给myArray，这样原来的模板代码完全不用改，就能正常工作。

比如在你的数据请求逻辑里：

// 假设你通过axios或其他方式获取API数据
async fetchData() {
  const response = await yourApiCall();
  // 把返回的字符串布尔值转成真正的布尔类型
  this.myArray = Object.fromEntries(
    Object.entries(response.data).map(([key, value]) => {
      // 严格匹配字符串"true"，避免其他值被误转
      return [key, value === 'true'];
    })
  );
}

处理后myArray里的每个值都是布尔类型，v-model可以直接绑定，复选框状态就能正常显示了。

方案二：用:checked和@change替代v-model（适合不能修改原始数据的场景） #

如果因为业务依赖不能修改myArray的字符串格式，可以放弃直接用v-model，改用手动绑定选中状态和监听变化事件：

修改模板代码：

<template v-for="(item, index) in myFields" :key="item.code">
  <v-checkbox 
    :checked="myArray[item.code] === 'true'" 
    :label="item.name"
    @change="updateCheckboxStatus(item.code, $event)"
  />
</template>

然后在组件的methods里添加处理函数：

methods: {
  updateCheckboxStatus(code, isChecked) {
    // 把布尔值转回字符串格式存回myArray
    this.myArray[code] = isChecked ? 'true' : 'false';
  }
}

这里:checked根据字符串是否等于"true"判断复选框状态，@change事件把用户选择转换成对应字符串更新到myArray，完美实现双向绑定效果。

为什么原来的写法会报错？ #

你之前尝试的v-model="Boolean(myArray[item.code])"之所以报错，是因为v-model需要一个可被赋值的左值（比如data中的响应式属性、带setter的计算属性），而Boolean(...)是一个表达式，返回的是临时布尔值，无法被重新赋值，所以Vue会提示需要有效的LHS（左值）。

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