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.
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>;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With