En JavaScript, l'objet peut étaler une valeur facultative comme celle-ci:
<template> <textarea v-model="textValue"> <!-- How can I optional bind v-model? --> </template>
Dans React, JSX peut transmettre des accessoires facultatifs comme celui-ci:
<Child {...(editable && { editable: editableOpts })} />
Maintenant dans Vue, comment puis-je obtenir un v-model facultatif?
J'ai une zone de texte comme celle-ci
const payload = {
name: "Joseph",
...(isMember && { credential: true })
};
Comment puis-je obtenir une liaison optionnelle v-model?
Je veux faire cela parce que je veux afficher un avertissement sur cette zone de texte lorsqu'une erreur se produit.
En cas d'erreur se produit, textarea affiche l'avertissement et efface l'entrée (le v-model)
4 Réponses :
Je pense que quelque chose comme ça ferait l'affaire pour vous
<template> <textarea v-if="hasError" :value="textValue"> <textarea v-else v-model="textValue"> </template>
Je pense que c'est le seul moyen ~
Sauf que vous avez besoin d'un gabarit div à l'intérieur d'un wrapper.
N'avez-vous pas essayé l'opérateur ternaire?
<template>
<textarea v-model="myModel">
</template>
computed: {
myModel(){
if(this.someValue == "test"){
return "value1";
}else{
return "value2";
}
}
}
et dans les données:
data(){
return {
someValue: "test",
value1: "i am value 1",
value2: "i am value 2"
}
}
Ou vous pouvez le faire avec des propriétés calculées comme celle-ci :
<template> <textarea v-model="someValue == 'test' ? 'value1' : 'value2'"> </template>
Merci, mais de cette façon, il lie toujours le v-model. Je veux une liaison facultative.
Vous devez utiliser v-if pour vérifier la première condition, si elle correspond, puis lier le modèle comme ceci
<textarea v-model="textValue == 'test' ? 'ifTrue' : 'ifFalse'">
Ou vous pouvez utiliser un opérateur ternaire comme celui-ci p>
<template> <textarea v-if="something" :value="textValue"> <textarea v-else v-model="textValue"> <!-- bind v-model here --> </template>
Pour en savoir plus, reportez-vous à ces liens
Merci, mais de cette façon, il lie toujours le v-model. Je veux une liaison facultative.
Options dans quel cas?
La manière correcte est d'utiliser les propriétés get et set de la variable calculée
<template>
<textarea v-model="compVal" />
</template>
<script>
export default {
data () {
return {
valueTrue: 'hello',
valueFalse: 'bye',
selected: false
}
},
computed: {
compVal: {
get () {
if (this.selected) {
return this.valueTrue
} else {
return this.valueFalse
}
},
set (val) {
if (this.selected) {
this.valueTrue = val
} else {
this.valueFalse = val
}
}
}
}
}
</script>
Avez-vous essayé la syntaxe conditionnelle de v-bind? v-model = "{vModelProperty: condition}" Je ne sais pas si cela fonctionnera, mais cela pourrait
Je veux une liaison facultative du modèle v.