VueJS使用v-model绑定的checkbox列表如何设置默认选中状态？

在 Vue 中使用 v-model 绑定复选框组时，v-model 会优先读取绑定的响应式数据作为选中依据，原生 checked 属性会被覆盖，属于框架的正常设计逻辑。

解决方案步骤 #

• 首先确认复选框组绑定的是数组类型的响应式变量，给每个 checkbox 绑定唯一的value属性值
  模板参考代码：

  <template>
    <div v-for="item in optionList" :key="item.id">
      <input 
        type="checkbox" 
        :value="item.id" 
        v-model="checkedIds"
      >
      <label>{{ item.name }}</label>
    </div>
  </template>
  

• 直接给绑定的数组设置初始值，把需要默认选中的项对应的value值提前放入数组即可，无需设置原生checked属性
  Vue3 写法参考：

  <script setup>
  import { ref } from 'vue'
  // 复选框选项列表
  const optionList = ref([
    { id: 1, name: '选项1' },
    { id: 2, name: '选项2' },
    { id: 3, name: '选项3' }
  ])
  // 默认选中ID为1、3的选项，直接把对应value放入初始数组
  const checkedIds = ref([1, 3])
  </script>
  

  Vue2 写法参考：

  <script>
  export default {
    data() {
      return {
        optionList: [
          { id: 1, name: '选项1' },
          { id: 2, name: '选项2' },
          { id: 3, name: '选项3' }
        ],
        // 初始值填入需要默认选中的value值
        checkedIds: [1, 3]
      }
    }
  }
  </script>
  

常见注意事项 #

• 若为异步加载选项的场景，需要等选项列表加载完成后，再给绑定的数组赋值，避免响应式失效
• 注意value值的类型要和数组内元素类型完全匹配，例如value为字符串"1"时，数组内填入数字1会无法匹配选中
• 不要同时使用v-model和原生checked属性，二者会产生冲突，选中状态完全通过v-model绑定的数组控制即可

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