vuejs 2 Composition API:TypeError:无法读取未定义的属性(读取“长度”)
2022-09-12
3415
你好,vuejs 用户社区 我遇到了一个无法解决的问题:
- 目前我正在使用 vuejs 2.x,我的操作系统是 Windows 11。在 yarn install 或 npm install 之后,此源控制台会给我一个错误,如下所示。
[Vue warn]:设置错误:“TypeError:无法读取未定义的属性(读取‘length’)”
我正在使用 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" } }
谢谢并致以问候
2个回答
上述错误是因为“vue”和“@vue/composition-api”版本冲突。因为 "@vue/composition-api": "^1.4.0", 它仅支持 "vue" 版本: "2.6.14" 及以下版本所以我们必须限制它的版本
我通过以下步骤修复了上述步骤:
步骤 1: 我删除 node_modules 文件夹和 package-lock.json 文件。
步骤 2: 转到依赖项内的 package.json 文件找到 "vue": "2.x", 更改为 "vue": "2.6.x", 并将 "vue-template-compiler": "2.x" 编辑为 "vue-template-compiler": "2.6.x"
步骤 3: 在项目目录的终端内再次输入 npm install 然后 npm run serve 查看结果。
希望这篇文章对您有所帮助
Pham Minh Tuan
2022-09-14
问题不在于 Composition API,而在于您的代码。您可能试图访问未定义的数组的长度。在控制台中查找错误输出,并尝试通过单击位于错误消息右侧的目标来查找错误来源。
Daniel Klimek
2022-09-12