Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Error message. "Props with type Object/Array must use a factory function to return the default value."

I am using Vue-Cli3.0. I used this module for Vue.js. https://github.com/holiber/sl-vue-tree

This is a customizable draggable tree component for Vue.js but I found that it could not copy functions of object.

https://github.com/holiber/sl-vue-tree/blob/master/src/sl-vue-tree.js#L715

Because of here.

JSON.parse(JSON.stringify(entity))

So I used this module and edited the copy function.

https://www.npmjs.com/package/clone

var clone = require('clone');

copy(entity) {
    return clone(entity)
},

In this way, the function of the object is correctly copied.

I already have tested it, and it worked correctly. There was no problem with the performance but I got a console error.

[Vue warn]: Invalid default value for prop "multiselectKey": Props with type Object/Array must use a factory function to return the default value.

found in

---> <SlVueTree> 

I want to know the way to erase this error. Thank you for reading my question.

like image 248
Kuru Avatar asked Aug 22 '18 02:08

Kuru


4 Answers

A factory function in props looks like this:

props: {
    exampleDefaultObject: {
        type: Object,
        default() {
            return {}
        }
    },
    exampleDefaultArray: {
        type: Array,
        default() {
            return []
        }
    }
},

or in ES6:

props: {
    exampleDefaultObject: {
        type: Object,
        default: () => ({})
    },
    exampleDefaultArray: {
        type: Array,
        default: () => []
    }
},

(for people who come here looking for an explanation of the error in the question 'props with type object/array must use a factory function to return the default value')

Note that when returning an object in an es6 arrow function, you need the parentheses: () => ({}) instead of () => {}

like image 135
Katinka Hesselink Avatar answered Nov 18 '22 09:11

Katinka Hesselink


according to your console warn, i find the error

https://github.com/holiber/sl-vue-tree/blob/master/src/sl-vue-tree.js#L30

try to fix it like this:

multiselectKey: {
  type: [String, Array],
  default: function () {
    return ['ctrlKey', 'metaKey']
  },
  validator: function (value) {
    let allowedKeys = ['ctrlKey', 'metaKey', 'altKey'];
    let multiselectKeys = Array.isArray(value) ? value : [value];
    multiselectKeys = multiselectKeys.filter(keyName => allowedKeys.indexOf(keyName ) !== -1);
    return !!multiselectKeys.length;
  }
},

the component default value must use a factory function to return!

try it and hope it can help you

like image 33
Trick Avatar answered Nov 18 '22 11:11

Trick


these cases require a function than produce the default value, not an object or array:

obj_param:{
        type:Object,
        default:()=>({})
},
array_param:{
        type:Array,
        default:()=>[]
},

this is for performance reasons, since the function is called only if needed (no value so use default), while the direct value would be instantiated everytime the component is used

like image 10
Luca C. Avatar answered Nov 18 '22 10:11

Luca C.


In TS format in my class component I have used it similarly as follows. It solved my error. Thanks to Trick & Katinka for solution above!

@Prop({default(){return []}}) private markerList!: Array<markerType>;
like image 2
Yogesh Vadekar Avatar answered Nov 18 '22 11:11

Yogesh Vadekar