vue.js désactiver l’entrée conditionnelle

Question

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 Vue.js composant, j'ai:

..
..
ready() {
        this.form.name = this.store.name;
        this.form.validated = this.store.validated;
    },
..

validated être boolean, qui peut être soit 0 ou 1, mais n'importe quelle valeur est stockée dans la base de données, mon entrée est toujours désactivé.

J'ai besoin de l'entrée sera désactivée si false, sinon il doit être activé et modifiable.

Mise à jour:

Ce faisant toujours permet l'entrée (pas de question, j'ai 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">

Ce faisant toujours désactivé l'entrée (pas de question, j'ai 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 : ''">

Answer 1

Pour retirer l’hélice handicapé, vous devez affecter la valeur . Cela doit être la valeur booléenne pour , pas la chaîne `` .

Ainsi, si la valeur de est un 1 ou un 0, puis définir conditionnellement la prop basé sur cette valeur. Par exemple :

Voici un exemple.

Answer 2

vous pourriez avoir une propriété calculée qui retourne un booléen dépendant sur quelles que soient les critères dont vous avez besoin.

puis mettez votre logique dans une propriété calculée...

Answer 3

Pas difficile, cochez cette case.

jsfiddle

Answer 4

Vous pouvez manipuler :disabled de l'attribut vue.js.

Il acceptera un booléen, si c'est vrai, alors l'entrée a été désactivé, sinon il sera activé...

Quelque chose comme structuré comme ci-dessous dans votre cas, par exemple:

<input type="text" id="name" class="form-control" name="name" v-model="form.name" :disabled="validated ? false : true">

Lire également ci-dessous:

Conditionnellement la Désactivation de l'Entrée des Éléments via JavaScript Expression

Vous pouvez conditionnellement désactiver l'entrée des éléments inline avec une expression JavaScript. Ce compact approche fournit un moyen rapide moyen d'appliquer une simple logique conditionnelle. Par exemple, si vous avez seulement besoin de pour vérifier la longueur du mot de passe, vous pouvez envisager de faire quelque chose comme cette.

<h3>Change Your Password</h3>
<div class="form-group">
  <label for="newPassword">Please choose a new password</label>
  <input type="password" class="form-control" id="newPassword" placeholder="Password" v-model="newPassword">
</div>

<div class="form-group">
  <label for="confirmPassword">Please confirm your new password</label>
  <input type="password" class="form-control" id="confirmPassword" placeholder="Password" v-model="confirmPassword" v-bind:disabled="newPassword.length === 0 ? true : false">
</div>

Answer 5

Votre désactivé attribut requiert une valeur booléenne:

<input :disabled="validated" />

Remarquez comment je ne l'ai vérifié si validated - Cela devrait fonctionner comme 0 is falsey ...e.g

0 is considered to be false in JS (like undefined or null)

1 is in fact considered to be true

Faire très attention à essayer: <input :disabled="!!validated" />

Cette double négation transforme l' falsey ou truthy de la valeur de 0 ou 1 de false ou true

ne me croyez pas? allez dans votre console et tapez !!0 ou !!1 :-)

Aussi, assurez-vous que votre nombre 1 ou 0 sont certainement à venir à travers comme un Nombre et pas la Chaîne '1' ou '0' pré-pend de la valeur que vous vérifiez avec un + e.g <input :disabled="!!+validated"/> cela transforme une chaîne de caractères en un nombre en un Nombre e.g

+1 = 1 +'1' = 1 Comme David Morrow a dit ci-dessus, vous pourriez mettre votre logique conditionnelle dans une méthode, cela vous donne plus lisible code - tout juste de retour de la méthode la condition que vous souhaitez vérifier.