开发者问题收集

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