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

Question

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.

Answer 1

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 () => {}

Answer 2

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

Answer 3

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>;