vuejs 2 组合 api: TypeError: Cannot read properties of undefined (reading 'length')

Question

你好 vuejs 用户社区我遇到了一个无法解决的问题：

• 目前我正在使用 vuejs 2.x，我的操作系统是 windows 11。在安装 yarn 或 npm 后，安装此源控制台给我一个错误，如图所示。

在此处输入图像描述

[Vue 警告]：设置错误：“TypeError：无法读取未定义的属性（读取'长度'）”

我正在使用vue/composition-api 1.4.0 版，我也更新到1.7.0 版，它一直在上面给出相同的错误。但仍然不可能。

这是我的 package.json 文件

{ "name": "vuexy-vuejs-react-html-laravel-admin-dashboard-template", "version": "6.4.0", "private": true, "scripts": { "serve": "vue-cli-service serve --open", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, "dependencies": { "@casl/ability": "4.1.6", "@casl/vue": "1.1.1", "@fullcalendar/common": "5.x", "@fullcalendar/core": "5.x", "@fullcalendar/daygrid": "5.x", "@fullcalendar/interaction": "5.x", "@fullcalendar/list": "5.x", "@fullcalendar/timegrid": "5.x", "@fullcalendar/vue": "5.x", "@popperjs/core": "^2.11.5", "@riophae/vue-treeselect": "^0.4.0", "@syncfusion/ej2-vue-dropdowns": "^19.4.52", "@vue/composition-api": "1.4.0", "@vueuse/core": "4.0.0", "animate.css": "4.1.1", "apexcharts": "3.23.0", "axios": "0.21.1", "axios-mock-adapter": "1.19.0", "bootstrap": "4.6.0", "bootstrap-vue": "2.21.1", "chart.js": "^2.9.4", "core-js": "^3.25.1", "dayjs": "1.10.7", "decimal.js": "^10.3.1", "devextreme": "21.1.6", "devextreme-aspnet-data-nojquery": "^2.8.6", "devextreme-vue": "21.1.6", "echarts": "4.8.0", "exceljs": "^4.3.0", "file-saver-es": "^2.0.5", "inputmask": "^5.0.6", "jquery": "^3.6.0", "jsonwebtoken": "8.5.1", "jspdf": "^2.5.1", "jspdf-autotable": "^3.5.20", "leaflet": "1.6.0", "portal-vue": "2.1.7", "postcss-rtl": "1.7.3", "prismjs": "1.19.0", "qrcode": "^1.5.0", "string-math": "^1.2.2", "swiper": "5.4.5", "uuid": "8.3.2", "vee-validate": "3.4.5", "vue": "2.x", "vue-apexcharts": "1.6.0", "vue-autosuggest": "2.2.0", "vue-awesome-swiper": "4.1.1", "vue-base64-file-upload": "^1.0.4", "vue-chartjs": "3.5.0", "vue-cleave-component": "2.1.3", "vue-clickaway": "^2.2.2", "vue-clipboard2": "0.3.1", "vue-context": "6.0.0", "vue-cool-select": "^3.5.2", "vue-custom-scrollbar": "^1.4.3", "vue-easy-dnd": "^1.19.0", "vue-echarts": "5.0.0-beta.0", "vue-feather-icons": "5.1.0", "vue-flatpickr-component": "8.1.6", "vue-form-wizard": "0.8.4", "vue-good-table": "2.21.0", "vue-html2pdf": "^1.8.0", "vue-i18n": "8.22.2", "vue-multiselect": "^2.1.6", "vue-numeric": "^2.5.0", "vue-perfect-scrollbar": "0.2.1", "vue-prism-component": "1.1.1", "vue-qrcode": "^0.3.5", "vue-quill-editor": "3.0.6", "vue-ripple-directive": "2.0.1", "vue-router": "3.4.9", "vue-select": "3.11.2", "vue-slider-component": "3.2.11", "vue-swatches": "^2.1.1", "vue-sweetalert2": "4.1.1", "vue-toastification": "1.7.8", "vue-tour": "1.5.0", "vue-tree-halower": "1.8.3", "vue2-datepicker": "^3.10.4", "vue2-leaflet": "2.5.2", "vuedraggable": "2.24.3", "vuex": "3.6.0" }, "devDependencies": { "@vue/cli-plugin-babel": "~4.5.9", "@vue/cli-plugin-eslint": "~4.5.9", "@vue/cli-plugin-router": "~4.5.9", "@vue/cli-plugin-vuex": "~4.5.9", "@vue/cli-service": "~4.5.9", "@vue/eslint-config-airbnb": "^5.3.0", "@vuepress/plugin-medium-zoom": "^1.7.1", "babel-eslint": "^10.0.3", "eslint": "6.8.0", "eslint-plugin-import": "^2.22.1", "eslint-plugin-vue": "6.2.2", "sass": "1.32.*", "sass-loader": "^10.1.0", "vue-template-compiler": "2.x" } }

谢谢和问候

Answer 1

问题不在于组合 API，问题在于您的代码。 您可能正在尝试访问未定义的数组的长度。 在控制台中查找错误 output 并尝试查找错误来自单击位于错误消息右侧的目标的位置。

Answer 2

上述错误是因为它与“vue”和“@vue/composition-api”版本冲突。 因为“@vue/composition-api”：“^1.4.0”，它只支持“vue”版本：“2.6.14”，所以我们必须限制它的版本

我通过以下步骤修复了上述步骤：

第 1 步：我删除 node_modules 文件夹和 package-lock.json 文件。

步骤2： go 到 package.json 文件在依赖项里面找到“vue”：“2.x”，更改为“vue”-template-edit：“2.x6”。 “vue 模板编译器”：“2.6.x”

步骤 3：在项目目录类型 npm 的终端内再次安装，然后 npm 运行服务查看结果。

希望这篇文章有帮助