Différence entre “v-lier:la valeur” et “v-lier:la clé” en vue js
Ci-dessous mon code. Je veux utiliser "select" de la balise et je veux rendre les options et sa valeur à partir du script. J'ai utilisé "v-lier:la valeur" pour le rendu des valeurs à partir du script. Mais il y a une erreur, tels que ***"
[eslint-plugin-vue] [vue/besoin-v-pour-clés] Éléments dans l'itération
s'attendre à avoir des 'v-lier:la clé'
directives."***
Donc j'ai donné comme ceci **"
< option v-for= "option in nationalityOpt" v-bind:value="option.value" v-bind:key = ""> {{ option.text }} < /option>
".
Si j'ai enlevé le "v-lier:la valeur" à partir de mon code puis je ne pouvais pas obtenir les valeurs de l'option dans l'INTERFACE utilisateur. Je tiens à rectifier l'erreur pour "v-lier:" et je voudrais savoir la différence entre les deux. S'il vous plaît aider.
<template>
<b-card>
<h4 slot="header" class="card-title">Employee</h4>
<b-row>
<b-col sm="3">
<b-form-group>
<label for="name">First Name </label>
<input type="text" id="name" class="form-control" placeholder="Enter your name" v-model="firstName">
</b-form-group>
</b-col>
</b-row>
<b-row>
<b-col sm="3">
<b-form-group>
<label for="name">Nationality</label>
<select name="" id="" class="form-control" placeholder="Nationality" v-model="nationality">
<option v-for="option in nationalityOpt" v-bind:value="option.value"> {{ option.text }} </option>
</select>
</b-form-group>
</b-col>
</b-row>
<input type="submit" value="Submit" @click="validateForm">
</b-card>
</template>
<script>
export default {
name: 'addEmpl',
data () {
return {
firstName: '',
nationality: '1',
nationalityOpt: [
{ value: '1', text: 'Select' },
{ value: 'IN', text: 'Indian'},
{ value: 'OT', text: 'Others'}
],
}
}
}
</script>
Merci d'avance.
Vous devez vous connecter pour publier un commentaire.
Vérifier la docs pour la Liste de Rendu, en particulier sur les touches.
Vous avez besoin de la
v-bind:key
dans un v-parce qu'il doit différencier chaque composant de rendu, dans le cas de données de changer. Vous avez besoin d'utiliser les deux à la fois,v-bind:key
etv-bind:value
dans votre composantoption
, pour qu'il fonctionne correctement.Vous permet de simplifier et d'utiliser seulement
:key
et:value
, comme:Vue.js a quelques méthodes pour augmenter le rendu de l'efficacité par la réutilisation de composants. Pour faire la liste (avec v-pour rendre correctement, nous devrions fournir unique :la clé de liaison pour chaque élément https://vuejs.org/v2/guide/list.html#key
:key
.