At some point I noticed that a lot of warnings appear in the project, maybe because I reinstalled node_module or something else.
The problem is that when adding attributes to a custom component errors appear:
<AInput v-model="name" class="entity-details__desc" label="name" placeholder="bar" any-attribute="foo" />
In the browser console:
[Vue warn]: Wrong type passed as event handler to onClass - did you forget @ or : in front of your prop?
Expected function or array of functions, received type string.
at <AInput modelValue=null onUpdate:modelValue=fn class="entity-details__desc" ... >
at <PageLayout>
at <Application>
at <ApplicationPage onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy(Object) {…} > >
at <RouterView>
at <CommonLayout>
at <App>
[Vue warn]: Wrong type passed as event handler to onPlaceholder - did you forget @ or : in front of your prop?
Expected function or array of functions, received type string.
at <AInput modelValue=null onUpdate:modelValue=fn class="entity-details__desc" ... >
at <PageLayout>
at <Application>
at <ApplicationPage onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy(Object) {…} > >
at <RouterView>
at <CommonLayout>
at <App>
[Vue warn]: Wrong type passed as event handler to onAny-attribute - did you forget @ or : in front of your prop?
Expected function or array of functions, received type string.
at <AInput modelValue=null onUpdate:modelValue=fn class="entity-details__desc" ... >
at <PageLayout>
at <Application>
at <ApplicationPage onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy(Object) {…} > >
at <RouterView>
at <CommonLayout>
at <App>
I've tried bind to class and placeholder(I know it's supposed to work like this, but still)
<AInput v-model="name" :class="entity-details__desc" :label="name"/>
same error.
I tried completely rewriting the project with dependency updates from @vue/cli-service to vite, but the error persists.
Old version(when I first noticed the warnings)
"dependencies": {
"@fortawesome/fontawesome-free": "^6.4.2",
"@fortawesome/fontawesome-svg-core": "^1.2.36",
"@fortawesome/free-solid-svg-icons": "^5.15.4",
"@fortawesome/vue-fontawesome": "^3.0.0-4",
"@kyvg/vue3-notification": "^2.3.4",
"@popperjs/core": "^2.11.2",
"@vuepic/vue-datepicker": "^4.5.1",
"@vueup/vue-quill": "^1.0.0-beta.8",
"axios": "^0.24.0",
"chart.js": "^4.4.2",
"chartjs-plugin-datalabels": "^2.2.0",
"core-js": "^3.20.1",
"cross-env": "^7.0.3",
"dayjs": "^1.10.7",
"exceljs": "^4.4.0",
"gitart-vue-dialog": "^1.2.1",
"lodash": "^4.17.21",
"maska": "^1.5.0",
"qrcode": "^1.5.3",
"qs": "^6.10.3",
"quill-blot-formatter": "^1.0.5",
"socket.io-client": "^4.7.2",
"uuid": "^8.3.2",
"vue": "^3.3.10",
"vue-chartjs": "^5.3.1",
"vue-router": "^4.0.14",
"vue-upload-component": "^3.1.2",
"vue-virtual-scroller": "^2.0.0-beta.8",
"vue3-click-away": "^1.2.1",
"vuedraggable": "^4.1.0",
"vuex": "^4.0.2",
"yup": "^0.32.11"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.15",
"@vue/cli-plugin-eslint": "~4.5.15",
"@vue/cli-plugin-router": "~4.5.15",
"@vue/cli-plugin-vuex": "~4.5.15",
"@vue/cli-service": "~4.5.15",
"@vue/compiler-sfc": "^3.2.26",
"@vue/eslint-config-prettier": "^6.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-vue": "^7.0.0",
"prettier": "^2.2.1",
"sass": "^1.49.8",
"sass-loader": "^10.2.1",
"vue-loader-v16": "^16.0.0-beta.5.4"
}
current version project(problem persists)
"dependencies": {
"@fortawesome/fontawesome-free": "^6.4.2",
"@fortawesome/fontawesome-svg-core": "^1.2.36",
"@fortawesome/free-solid-svg-icons": "^5.15.4",
"@fortawesome/vue-fontawesome": "^3.0.0-4",
"@kyvg/vue3-notification": "^2.3.4",
"@popperjs/core": "^2.11.2",
"@vuepic/vue-datepicker": "^4.5.1",
"axios": "^0.24.0",
"chart.js": "^4.4.2",
"chartjs-plugin-datalabels": "^2.2.0",
"cross-env": "^7.0.3",
"dayjs": "^1.10.7",
"exceljs": "^4.4.0",
"gitart-vue-dialog": "^3.1.0",
"lodash": "^4.17.21",
"maska": "^1.5.0",
"qrcode": "^1.5.3",
"qs": "^6.10.3",
"socket.io-client": "^4.7.2",
"uuid": "^8.3.2",
"vite-plugin-require": "^1.2.14",
"vue": "^3.4.29",
"vue-chartjs": "^5.3.1",
"vue-router": "^4.4.0",
"vue-upload-component": "^3.1.2",
"vue-virtual-scroller": "^2.0.0-beta.8",
"vue3-click-away": "^1.2.1",
"vuedraggable": "^4.1.0",
"vuex": "^4.1.0",
"yup": "^0.32.11"
},
"devDependencies": {
"@babel/eslint-parser": "^7.24.7",
"@vitejs/plugin-vue": "^5.0.5",
"@vue/compiler-sfc": "^3.4.29",
"@vue/eslint-config-prettier": "^9.0.0",
"eslint": "^8.57.0",
"eslint-plugin-prettier": "^5.1.3",
"eslint-plugin-vue": "^9.26.0",
"prettier": "^3.3.2",
"sass": "^1.49.8",
"vite": "^5.3.1"
}
In attempts to solve the problem, many times removed node_modules and package-lock.json to rule out a problem with incorrectly installed dependencies.
PROBLEM SOLVED
The problem turned out to be in the component. Inside was <input ... v-on="listeners" />
computed: {
listeners: function () {
return Object.assign({}, this.$attrs, {
input: () => ({...}),
update: () => ({...}),
keyup: () => ({...}),
});
},
},
After removing this.$attrs
, the warn disappeared, now the problem seems obvious, but since this code worked fine for more than a year, I didn't immediately realize what was wrong.
this.$attrs
should bethis.$listeners
. I should mention thatthis.$attrs
refers to props not defined strictly in the component andthis.$listeners
refers to not-defined events.