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

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 : ''">

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>

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;
  }
}

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

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.

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>

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>

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;
    }
  }
})

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>

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>

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