1

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.

4
  • The complete SFC code is more important than the versions of dependencies, I think. Commented Jun 22 at 15:41
  • A minimal reproducible example is very welcome, or at least a Github link.
    – kissu
    Commented Jun 22 at 19:08
  • "package-lock.json to rule out a problem with incorrectly installed dependencies" - removing lock file without a specific reason doesn't fix anything. If you believe the problem was caused by the deps, revert lock file to earlier state. There's no good explanation why "class" prop could be confused with "class" event, which translates to onClick prop. It could be the compiler to blame but this could be ruled out since you tried to change to vite. What you have is not a common problem at all. It needs to be debugged, consider providing a workable demo, as suggested above. Commented Jun 22 at 22:58
  • You are merging props with events in the computed; this.$attrs should be this.$listeners. I should mention that this.$attrs refers to props not defined strictly in the component and this.$listeners refers to not-defined events.
    – Raeisi
    Commented Jun 23 at 11:21

0

Browse other questions tagged or ask your own question.