javascript - Error message. "Props with type ObjectArray must use a factory function to return the default value.&q

admin管理员组

文章数量:1135914

I am using Vue-Cli3.0. I used this module for Vue.js.

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

.js#L715

Because of here.

JSON.parse(JSON.stringify(entity))

So I used this module and edited the copy function.

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.

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.

• javascript
• typescript
• vue.js
• vuejs2

Share Improve this question Follow edited Feb 5, 2019 at 20:32 Mridang Agarwalla 44.9k7474 gold badges234234 silver badges393393 bronze badges asked Aug 22, 2018 at 2:05 KuruKuru 1,51722 gold badges1515 silver badges2121 bronze badges

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 154

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

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

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

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

本文标签：