Comment désactiver l'entrée de façon conditionnelle dans vue.js

277

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 0ou 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 : ''">
Zaffar Saffee
la source

Réponses:

484

Pour supprimer l'accessoire désactivé, vous devez définir sa valeur sur false. Il doit s'agir de la valeur booléenne de false, et non de la chaîne 'false'.

Donc, si la valeur de validatedest soit 1 ou 0, définissez conditionnellement l' disabledhélice en fonction de cette valeur. Par exemple:

<input type="text" :disabled="validated == 1">

Voici un exemple.

var app = new Vue({
  el: '#app',

  data: {
    disabled: 0,
  },
}); 
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button @click="disabled = (disabled + 1) % 2">Toggle Enable</button>
  <input type="text" :disabled="disabled == 1">
    
  <pre>{{ $data }}</pre>
</div>

asemahle
la source
dans ma base de données, j'ai 0 et 1 stocké pour vrai et faux, en jouant avec votre violon, 0 et 1 le maintient désactivé
Zaffar Saffee
dois-je modifier ma structure db pour la rendre exactement vraie et fausse?
Zaffar Saffee
Non, définissez simplement la valeur sur trueou en falsefonction de la valeur de l'élément dans votre base de données
asemahle
11
faites juste:: disabled = "validated" Tant que validée est True / false ou 0/1, Javascript saura.
Despertaweb
1
@gk le code qui était dans le jsfiddle est maintenant dans la réponse
asemahle
63

vous pourriez avoir une propriété calculée qui renvoie un booléen en fonction des critères dont vous avez besoin.

<input type="text" :disabled=isDisabled>

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

computed: {
  isDisabled() {
    // evaluate whatever you need to determine disabled here...
    return this.form.validated;
  }
}
David Morrow
la source
Cela a fonctionné pour moi, sans guillemets nécessaires, dans mon cas, appeler isDisabled()dans le code HTML, défini dans Data.
Leo
J'aime vraiment beaucoup plus net
Shady Echo 419
Pourquoi aucun devis n'est nécessaire?
Ferkze
23

Pas difficile, vérifiez ça.

<button @click="disabled = !disabled">Toggle Enable</button>
<input type="text" id="name" class="form-control" name="name"  v-model="form.name" :disabled="disabled">

jsfiddle

Sebastiao Marcos
la source
votre composant a besoin d'attractions de données avec désactivé: type faux ou booléen.
Sebastiao Marcos
15

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 comme 0 is falsey... par exemple

0 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 falseyou truthyvaleur 0ou 1à falseoutrue

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

De plus, pour vous assurer que votre numéro 1ou bien apparaît 0dé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.

Francis Leigh
la source
11

Vous pouvez manipuler l' :disabledattribut 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:

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

Lisez également ceci ci-dessous:

Désactivation conditionnelle des éléments d'entrée via l'expression JavaScript

Vous pouvez désactiver conditionnellement les éléments d'entrée en ligne avec une expression JavaScript. Cette approche compacte fournit un moyen rapide d'appliquer une logique conditionnelle simple. Par exemple, si vous avez seulement besoin de vérifier la longueur du mot de passe, vous pouvez envisager de faire quelque chose comme ça.

<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>
Alireza
la source
7

Vous pouvez créer une propriété calculée et activer / désactiver tout type de formulaire en fonction de sa valeur.

<template>
    <button class="btn btn-default" :disabled="clickable">Click me</button>
</template>
<script>
     export default{
          computed: {
              clickable() {
                  // if something
                  return true;
              }
          }
     }
</script>
Yamen Ashraf
la source
1
C'est la réponse la plus simple à lire et à appliquer à son cas d'utilisation, à mon avis.
Giorgio Tempesta
1
c'était la seule chose qui fonctionnait pour moi. pour déplacer la méthode vers calculée au lieu de méthodes. Merci!
jokab
6

Essaye ça

 <div id="app">
  <p>
    <label for='terms'>
      <input id='terms' type='checkbox' v-model='terms' /> Click me to enable
    </label>
  </p>
  <input :disabled='isDisabled'></input>
</div>

vue js

new Vue({
  el: '#app',
  data: {
    terms: false
  },
  computed: {
    isDisabled: function(){
        return !this.terms;
    }
  }
})
Atchutha rama reddy Karri
la source
4

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:

this.$nextTick(()=>{
    this.disableInputBool = true
})

Exemple de workflow plus complet:

<div @click="allowInputOverwrite">
    <input
        type="text"
        :disabled="disableInputBool">
</div>

<button @click="disallowInputOverwrite">
    press me (do stuff in method, then disable input bool again)
</button>

<script>

export default {
  data() {
    return {
      disableInputBool: true
    }
  },
  methods: {
    allowInputOverwrite(){
      this.disableInputBool = false
    },
    disallowInputOverwrite(){
      // accomplish other stuff here.
      this.$nextTick(()=>{
        this.disableInputBool = true
      })
    }
  }

}
</script>
Kobi
la source
++ (Cependant, les créateurs de Vue.js ont préparé ce ... vuejs.org/v2/guide/syntax.html#Attributes )
Rytis Dereskevicius
2

Peut utiliser cette condition d'ajout.

  <el-form-item :label="Amount ($)" style="width:100%"  >
            <template slot-scope="scoped">
            <el-input-number v-model="listQuery.refAmount" :disabled="(rowData.status !== 1 ) === true" ></el-input-number>
            </template>
          </el-form-item>
anson
la source
0

Gardez à l'esprit que les ensembles / cartes ES6 ne semblent pas réactifs pour autant que je sache, au moment de la rédaction.

omarjebari
la source