javascript - 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.

question from:https://stackoverflow.com/questions/51958950/error-message-props-with-type-object-array-must-use-a-factory-function-to-retu

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