web-dev-qa-db-fra.com

Message d'erreur. "Les accessoires de type Object / Array doivent utiliser une fonction d'usine pour renvoyer la valeur par défaut."

J'utilise Vue-Cli3.0. J'ai utilisé ce module pour Vue.js. https://github.com/holiber/sl-vue-tree

Il s'agit d'un composant d'arbre déplaçable personnalisable pour Vue.js mais j'ai trouvé qu'il ne pouvait pas copier les fonctions de l'objet.

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

À cause d'ici.

JSON.parse(JSON.stringify(entity))

J'ai donc utilisé ce module et édité la fonction de copie.

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

var clone = require('clone');

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

De cette façon, la fonction de l'objet est correctement copiée.

Je l'ai déjà testé et cela a fonctionné correctement. Il n'y avait aucun problème avec les performances mais j'ai eu une erreur de console.

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

Je veux savoir comment effacer cette erreur. Merci d'avoir lu ma question.

javascripttypescriptvue.jsvuejs2
6
akao

selon votre console avertir, je trouve l'erreur

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

essayez de le réparer comme ceci:

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

la valeur par défaut du composant doit utiliser une fonction d'usine pour retourner!

essayez-le et j'espère qu'il peut vous aider

11
Trick

Une fonction d'usine dans les accessoires ressemble à ceci:

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

ou dans ES6:

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

(pour les personnes qui viennent ici à la recherche d'une explication de l'erreur dans la question "les accessoires de type objet/tableau doivent utiliser une fonction d'usine pour renvoyer la valeur par défaut")

Notez que lorsque vous renvoyez un objet dans une fonction de flèche es6, vous avez besoin des parenthèses: () => ({}) au lieu de () => {}

1
Katinka Hesselink