J'ai utilisé v-bind et v-model dans le champ de saisie de mon formulaire. mais quand j'exécute la commande npm run dev , cela montre que: v-bind: value = "user.name" est en conflit avec v-model sur le même élément car ce dernier se développe déjà en une valeur erreur de liaison interne .
dans v-bind je lie ma valeur props et dans v-model utilise un variable locale.
Voici mon exemple de code:
<label>Name</label>
<input name="name" class="form-control" v-bind:value="user.name" v-model="username"/>
props:{
user:{
type:[Array,Object],
required:true,
},
},
data(){
return{
username:'',
email:'',
id:''
}
},
3 Réponses :
Vous ne pouvez pas avoir deux sources de données différentes (c.-à-d. v-bind et v-model en même temps) liées à la même entrée; Si vous cherchez à initialiser l'entrée à partir des accessoires, vous pouvez définir le support de données username avec this.user.name sans utiliser v-bind: value code>: <input name="name" class="form-control" v-model="username"/>
props:{
user:{
type:[Array,Object],
required:true,
},
},
data(){
return{
username: this.user.name,
email:'',
id:''
}
}
Vérifiez à quoi ressemblent les accessoires user , contiennent-ils un champ name ?
oui, il contient le champ name , je l'ai testé en vue comme {{user.name}} sa sortie show.
Cela semble fonctionner pour moi à ce jsfiddle: jsfiddle.net/qas4z0n6
v-model = "username" est juste un raccourci pour:
: value = "username" @ input = "username = $ event"
et par conséquent vous avez:
<input name="name" class="form-control" :value="user.name" :value="username" @input="username = $event" />
c'est une erreur - vue ne sais pas ce qui est mis en entrée
En règle générale, v-bind: value est en conflit avec v-model car il se lie également à value . Les exceptions à cette règle sont les cases à cocher et les boutons radio où les deux sont valides (et peuvent être d'où vous avez eu l'idée). Dans ces cas, v-model se lie en fait à la propriété selected .
<!-- Valid, binds to selected --> <input type="checkbox" name="fruits" :value="currentFruit" v-model="selectedFruits" /> <input type="radio" name="animal" :value="currentAnimal" v-model="selectedAnimal" /> <!-- Not valid, both bind to value --> <input type="text" :value="currentName" v-model-"currentName" />
que puis-je faire maintenant, pour surmonter mon problème ??
Utilisez simplement v-model sans la liaison de valeur supplémentaire. Pour obtenir la valeur initiale, vous pouvez écrire quelque chose comme username: this.user.name .
username: this.user.name n'affiche aucune valeur, mais lorsque vous utilisez {{user.name}} , il affiche la valeur. c'est un problème. pour votre préoccupation, mon modèle enfant est un composant modal .