web-dev-qa-db-fra.com

Comment ajouter plusieurs types de données pour les accessoires VueJs?

Cette erreur m'a eu lors du passage de différentes valeurs au composant.

enter image description here

vue.jsvuejs2vue-component
24
Harsha Sampath

Voici la solution que j'ai trouvée.

props: {
   value: [Number, String, Array]
}
48
Harsha Sampath

En général, les accessoires sont répertoriés comme un tableau de chaînes, si vous n'avez pas de maux de tête de type:

props: ['title', 'likes', 'isPublished', 'commentIds', 'author']

Si vous souhaitez que chaque accessoire soit un type de valeur spécifique. Dans ces cas, vous pouvez répertorier les accessoires en tant qu'objet, où les noms et les valeurs des propriétés contiennent respectivement les noms et les types d'accessoires:

props: {
    title: String,
    likes: Number,
    isPublished: Boolean,
    commentIds: Array,
    author: Object
}

Si vous souhaitez utiliser plusieurs types, procédez comme suit:

props: {
    value: [String, Number],
}
4
Md Riadul Islam

La syntaxe avec un tube (Number | String), comme proposé dans la réponse acceptée, ne fonctionne pas réellement. Voici une solution plus détaillée avec des exemples:

Vérification de type, accessoire non requis

Utilisation de la syntaxe suivante pour taper check a prop:

props: {
  username: {
    type: [ String, Number ]
  }
}

Voici un exemple en direct d'une propriété avec vérification de type:

Vue.config.devtools = false;
Vue.config.productionTip = false;

Vue.component('test-component', {
  name: 'TestComponent',
  props: {
    username: {
      type: [ String, Number ]
    }
  },
  template: `<div>username: {{ username }}</div>`
});

new Vue({ el: '#app' });
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>

<div id="app">
  <!-- valid: String -->
  <test-component :username="'user 38'"></test-component>
  
  <!-- valid: Number -->
  <test-component :username="59"></test-component>
  
  <!-- valid: null is valid, it is not required -->
  <test-component :username="null"></test-component>

  <!-- valid: missing property is valid, it is not required -->
  <test-component></test-component>

  <!-- invalid: Array -->
  <test-component :username="['test', 456]"></test-component>
</div>

Vérification de type, accessoire requis et validateur personnalisé

Utilisez la syntaxe suivante pour taper check une propriété requise avec un validateur personnalisé.

props: {
  username: {
    type: [ String, Number ],
    required: true, // optional
    validator: item => item !== '123' // optional
  }
}

Voici un exemple en direct d'une propriété requise avec un validateur personnalisé:

Vue.config.devtools = false;
Vue.config.productionTip = false;

Vue.component('test-component', {
  name: 'TestComponent',
  props: {
    username: {
      type: [ String, Number ],
      required: true,
      validator: item => item !== '123'
    }
  },
  template: `<div>username: {{ username }}</div>`
});

new Vue({ el: '#app' });
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>

<div id="app">
  <!-- valid: String -->
  <test-component :username="'user 38'"></test-component>
  
  <!-- valid: Number -->
  <test-component :username="59"></test-component>
  
  <!-- invalid: Array -->
  <test-component :username="['test', 456]"></test-component>
  
  <!-- invalid: String, but disallowed by custom validator -->
  <test-component :username="'123'"></test-component>
  
  <!-- invalid: null property, it is required though -->
  <test-component :username="null"></test-component>

  <!-- invalid: missing required prop -->
  <test-component></test-component>
</div>
3
ssc-hrep3

Comme d'autres l'ont suggéré, il existe deux façons de définir les accessoires dans vuejs:

Le premier

//No need to define the type with this one
props: ['myVariable', 'foo', 'something']

Le second

//With this one you can define what type the prop is and other different useful things!
props: {
  myVariable: String, //You can define the type like this
  anyOfTheFollowing: String/Object/Array, //You can also define multiple possible types
  'kebab-case-like': Function, //Since vuejs is still javascript and the property 'props' is actually an object, you can define your props like this for kebab-case. You can also just use camelCase and use the kebab-case version in your template and it will still recognize it
  customOne: MyCustomType, //You can in theory use classes you've defined aswell
  foo: { //This is another way of defining props. Like an object
    type: Number,
    default: 1, //This is why this is mostly used, so you can easily define a default value for your prop in case it isn't defined
  },
  andAnotherOne: {
    type: Array,
    default: () => [], //With Arrays, Objects and Functions you have to return defaults like this since you need to return a new reference to it for it to be used
  },
  requiredOne: {
    type: Object,
    required: true //Another use for this. When it is marked as required and it isn't defined you'll get an error in the console telling you about it
  }
}

IMO J'adore la deuxième version car elle s'ouvre à bien plus et j'aime particulièrement la propriété par défaut.

1
Jasqui