web-dev-qa-db-ja.com

エラーメッセージ。 「Object / Array型の小道具は、ファクトリー関数を使用してデフォルト値を返す必要があります。」

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>

このエラーを消去する方法を知りたいです。私の質問を読んでくれてありがとう。

javascripttypescriptvue.jsvuejs2
6
akao

コンソールの警告に従って、私はエラーを見つけます

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

次のように修正してください：

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

コンポーネントのデフォルト値はファクトリ関数を使用して戻る必要があります！

それを試して、それがあなたを助けることを願っています

11
Trick

Propsのファクトリ関数は次のようになります。

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

またはES6で：

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

（「オブジェクト/配列型の小道具は工場出荷時の関数を使用してデフォルト値を返す必要があります」という質問のエラーの説明を求めてここに来る人のために）

Es6矢印関数でオブジェクトを返すときは、括弧が必要であることに注意してください：() => ({}) の代わりに () => {}

1
Katinka Hesselink