错误信息。 “对象/数组类型的道具必须使用工厂函数返回默认值。”

Question

我正在使用 Vue-Cli3.0。我将此模块用于 Vue.js。 https://github.com/holiber/sl-vue-tree

这是 Vue.js 的可自定义的可拖动树组件，但我发现它无法复制对象的功能。

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

因为这里。

 JSON.parse(JSON.stringify(entity))

所以我使用了这个模块并编辑了复制功能。

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

 var clone = require('clone');

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

这样，对象的功能就被正确复制了。

我已经对其进行了测试，并且可以正常工作。性能没有问题，但出现控制台错误。

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

我想知道消除此错误的方法。感谢您阅读我的问题。

原文由 Kuru 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

根据您的控制台警告，我发现错误

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

尝试像这样修复它：

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

组件默认值必须使用工厂函数才能返回！

试试看，希望它可以帮助你

原文由 Trick 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

props 中的工厂函数如下所示：

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

或者在 ES6 中：

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

（对于来这里寻找“对象/数组类型的道具必须使用工厂函数返回默认值”问题中的错误解释的人）

请注意，在 es6 箭头函数中返回对象时，您需要括号： () => ({}) 而不是 () => {}

原文由 Katinka Hesselink 发布，翻译遵循 CC BY-SA 4.0 许可协议