Vite+Vue报错TypeError: 无法读取undefined的checkedNumbers属性

错误原因 #

• 在<script setup>语法中，函数内部的this并不指向组件实例，而是undefined，因此调用this.checkedNumbers会触发未定义属性读取错误。
• checkedNumbers是ref创建的响应式变量，在脚本中必须通过.value才能获取到实际的数组值（模板中会自动解包，但脚本里不行）。

修复步骤 #

1. 直接引用响应式变量并访问.value
   去掉this，直接使用声明的checkedNumbers变量，并通过.value获取数组进行计算。
2. 用computed替代模板中的赋值表达式
   模板中直接赋值（prixSum = ...）不符合Vue响应式最佳实践，改用computed计算属性处理求和逻辑，代码更清晰且响应式更可靠。

修改后的完整代码 #

<script setup>
import { computed, ref } from "vue";

let checkedNumbers = ref([]);

// 用computed计算选中项的总和
const totalSum = computed(() => {
  return checkedNumbers.value.reduce((a, b) => {
    return parseFloat(a) + parseFloat(b);
  }, 0);
});
</script>

<template>
  <span id="prixSum" class="sm:text-center lg:text-left block font-bold text-sky-500 text-xl font-semibold lg:text-left">
    {{ totalSum === 0 ? model.prixS1 : parseFloat(totalSum + model.prixS1).toFixed(2) }}
  </span>
  <ul>
    <li>
      <span class="px-5 py-3 font-semibold text-sm tracking-wider bg-blue-500 text-center rounded dark:bg-indigo-700 dark:text-gray-900">
        {{ model.prixS1 }}
      </span>

      <input type="checkbox" id="prixS2" name="prixS2" v-model="checkedNumbers"
             :value="model.prixS2" class="hidden peer">

      <input type="checkbox" id="prixS3" name="prixS3" v-model="checkedNumbers"
             :value="model.prixS3" class="hidden peer">
    </li>
  </ul>
</template>

额外优化点 #

• 修正了checkbox的id属性命名：避免使用model.prixS2这种带点的格式，改用合法标识符（如prixS2），符合DOM元素ID规范。
• 移除了不必要的required属性：多个checkbox加required会强制全部勾选，若需要至少选一个，可自行添加自定义校验逻辑。

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