vue3, 复选框input的checked属性不生效？

Question

代码大致如下

<template>
   <input
    type="checkbox"
    @click="handleCheckAll"
    :checked="isCheckAll"
  />
</template>

<script lang="ts" setup>
// 当前可选项
const availableIds = computed(() => list.value.filter(item => isEnable(item.status)).map(item => item.id))

// 是否全选
const isCheckAll = computed(() => state.selectedAreas.join().includes(availableIds.value.join()))


// 全选/取消全选
const handleCheckAll = (e:Event) => {
   e.preventDefault()
   const targetChecked = (e.target as HTMLInputElement).checked
   if (targetChecked) {
      state.selectedAreas = availableIds
      console.log("isCheckAll", isCheckAll.value) // 这里打印是返回true的，但是不知道为什么视图不显示checked
   } else {
      state.selectedAreas = []
   }
}
</script>

Answer 1

<template>
   <input
    type="checkbox"
    @click="handleCheckAll"
    v-model="isCheckAll"
  />
</template>

改成这样呢？

还不行的话 把click 换成 @change？

Answer 2

1. Vue 是 MVVM 框架，在这类框架中，我们应当控制数据，而非手动调整每个 DOM 节点
2. 所以对 <input type="checked"> 和 <input type="radio"> 不要手动控制，用值去控制
3. 也就是用 v-model 去控制它绑定的数据
4. 全选，就把目标数组填满；反之，则清空
5. 你目前的做法，从框架角度来讲，是错的，所以不要再继续琢磨了

Answer 3

state.selectedAreas = availableIds

改成下面的试试？

state.selectedAreas = availableIds.value