Search code examples
vue.jsquasarvue-property-decorator

Vue Prop Decorator - Invalid prop type check


I am using vue-prop-decorator and Quasar Framework. I have a component, in which I recieve a prop, defined as follow:

<FabricanteComponente   
                :fabricante="fabricante"
/>

In the component itself, the prop is described with the decorator:

 @Prop({
        default: () => new Fabricante()
    })
    fabricante: Fabricante;

From recent updates in the package.json libraries I started to get the following error:

[Vue warn]: Invalid prop: type check failed for prop "fabricante". Expected , got Object

On the related dependencies listed on package.json I have

    "quasar": "^1.12.11",
    "vue-class-component": "^7.2.3",
    "vue-property-decorator": "^9.0.0"
    "@types/node": "^14.0.22",
    "@typescript-eslint/eslint-plugin": "^3.6.0",
    "@typescript-eslint/parser": "^3.6.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.8.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-cypress": "^2.11.1",
    "eslint-plugin-vue": "^6.2.2",
    "ts-loader": "^8.0.0",
    "typescript": "^3.9.6",
    "vuex-module-decorators": "^0.17.0"

But I cant figure where the error is placed. Any ideas on how to fix?


Solution

  • Today I found the problem. Vue itself does not explain so much about what Is happening in the warning message.

    Nevertheless, as you can see in the Prop definition, it expects a Fabricante instance, and I was sending just a raw object from a request. Creating a class like

    .then((response)=> new Fabricante(response));
    

    solved it.