J'ai une entrée:
<input type="text" id="name" class="form-control" name="name" v-model="form.name" :disabled="validated ? '' : disabled">
et dans mon composant Vue.js, j'ai:
..
..
ready() {
this.form.name = this.store.name;
this.form.validated = this.store.validated;
},
..
validated
étant un boolean
, il peut être soit 0
ou 1
, mais quelle que soit la valeur stockée dans la base de données, mon entrée est toujours désactivée.
J'ai besoin que l'entrée soit désactivée si false
, sinon elle devrait être activée et modifiable.
Mettre à jour:
Faire cela active toujours l'entrée (peu importe que j'aie 0 ou 1 dans la base de données):
<input type="text" id="name" class="form-control" name="name" v-model="form.name" :disabled="validated ? '' : disabled">
Cela a toujours désactivé l'entrée (peu importe que j'aie 0 ou 1 dans la base de données):
<input type="text" id="name" class="form-control" name="name" v-model="form.name" :disabled="validated ? disabled : ''">
la source
true
ou enfalse
fonction de la valeur de l'élément dans votre base de donnéesvous pourriez avoir une propriété calculée qui renvoie un booléen en fonction des critères dont vous avez besoin.
puis mettez votre logique dans une propriété calculée ...
la source
isDisabled()
dans le code HTML, défini dansData
.Pas difficile, vérifiez ça.
jsfiddle
la source
Votre attribut désactivé nécessite une valeur booléenne:
<input :disabled="validated" />
Remarquez comment je n'ai vérifié que si
validated
- Cela devrait fonctionner comme0 is falsey
... par exemple0 is considered to be false in JS (like undefined or null)
1 is in fact considered to be true
Pour être extrêmement prudent, essayez:
<input :disabled="!!validated" />
Cette double négation tourne la
falsey
outruthy
valeur0
ou1
àfalse
outrue
tu ne me crois pas? allez dans votre console et tapez
!!0
ou!!1
:-)De plus, pour vous assurer que votre numéro
1
ou bien apparaît0
définitivement sous forme de nombre et non de chaîne,'1'
ou'0'
préfixez la valeur que vous vérifiez avec un+
exemple,<input :disabled="!!+validated"/>
cela transforme une chaîne de nombre en un nombre, par exemple.+1 = 1 +'1' = 1
Comme David Morrow l'a dit ci-dessus, vous pouvez mettre votre logique conditionnelle dans une méthode - cela vous donne un code plus lisible - il suffit de sortir de la méthode la condition que vous souhaitez vérifier.la source
Vous pouvez manipuler l'
:disabled
attribut dans vue.js .Il acceptera un booléen, si c'est vrai , alors l'entrée sera désactivée, sinon elle sera activée ...
Quelque chose comme structuré comme ci-dessous dans votre cas par exemple:
Lisez également ceci ci-dessous:
la source
Vous pouvez créer une propriété calculée et activer / désactiver tout type de formulaire en fonction de sa valeur.
la source
Essaye ça
vue js
la source
La bascule de l' attribut désactivé de l'entrée était étonnamment complexe. Le problème pour moi était double:
(1) N'oubliez pas: l'attribut "désactivé" de l'entrée n'est PAS un attribut booléen .
La simple présence de l'attribut signifie que l'entrée est désactivée.
Cependant, les créateurs de Vue.js ont préparé ceci ... https://vuejs.org/v2/guide/syntax.html#Attributes
(Merci à @connexo pour cela ... Comment ajouter un attribut désactivé dans le texte d'entrée dans vuejs? )
(2) En outre, il y avait un problème de rendu de synchronisation DOM que je rencontrais. Le DOM ne se mettait pas à jour lorsque j'ai essayé de revenir en arrière.
Dans certaines situations, "le composant ne sera pas rendu de nouveau immédiatement. Il sera mis à jour au prochain" tick "."
Depuis les documents Vue.js: https://vuejs.org/v2/guide/reactivity.html
La solution était d'utiliser:
Exemple de workflow plus complet:
la source
Peut utiliser cette condition d'ajout.
la source
Gardez à l'esprit que les ensembles / cartes ES6 ne semblent pas réactifs pour autant que je sache, au moment de la rédaction.
la source