it-swarm-fr.com

Comment désactiver l'entrée 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 s'agir de 0 ou de 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.

Mise à jour:

En faisant cela toujours active l'entrée (peu importe que 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">

En faisant cela toujours désactivé l'entrée (peu importe que 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 : ''">
204
Zaffar Saffee

Pour supprimer l'accessoire désactivé, vous devez définir sa valeur sur false. Cela doit être la valeur booléenne pour false, pas la chaîne 'false'.

Ainsi, si la valeur de validated est un 1 ou un 0, définissez conditionnellement le prop disabled en fonction de cette valeur. Par exemple.:

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

Voici un exemple .

380
asemahle

vous pouvez 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;
  }
}
56
David Morrow

Pas difficile, vérifiez ceci.

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

jsfiddle

20
Sebastiao Marcos

Votre attribut disabled nécessite une valeur booléenne:

<input :disabled="validated" />

Remarquez que j’ai seulement 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

Pour être très prudent, essayez: <input :disabled="!!validated" />

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

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

De plus, pour vous assurer que votre numéro 1 ou 0 apparaît définitivement sous forme de nombre et non de chaîne '1' ou '0' pré-pendez la valeur vérifiée avec un + eg <input :disabled="!!+validated"/> ceci transforme une chaîne d'un nombre en un nombre eg

+1 = 1 +'1' = 1 Comme David Morrow a dit plus haut, vous pouvez mettre votre logique conditionnelle dans une méthode - cela vous en donne plus lisible code - il suffit de sortir de la méthode la condition que vous souhaitez vérifier.

14
Francis Leigh

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

Il acceptera un booléen, s'il s'agit de true, alors l'entrée est 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 aussi ceci ci-dessous:

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

Vous pouvez désactiver conditionnellement les éléments d'entrée inline avec une expression JavaScript. Cette approche compacte fournit un moyen rapide d'appliquer une logique conditionnelle simple. Par exemple, si vous devez uniquement vérifier la longueur du mot de passe, vous pouvez envisager de procéder de la sorte.
<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>
8
Alireza

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>
6
Yamen Ashraf

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

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>
2
anson

Basculer l'attribut de l'entrée désactivé était étonnamment complexe. Le problème pour moi était double:

(1) N'oubliez pas: l'attribut "désactivé" de l'entrée est PAS un booléen attribut.
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é cette ... https://vuejs.org/v2/guide/syntax.html#Attributes

(Merci à @connexo pour cela ... Comment ajouter un attribut désactivé dans le texte de saisie dans vuejs? )

(2) De plus, il y avait un problème de réinterprétation du timing DOM que j'avais. Le DOM ne se mettait pas à jour lorsque j'ai essayé de revenir en arrière.

Dans certaines situations, "le composant ne sera pas immédiatement rendu à nouveau. Il sera mis à jour lors du prochain" tick "."

Depuis les documents Vue.js: https://vuejs.org/v2/guide/reactivity.html

La solution était d'utiliser:

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

Plus complet exemple de flux de travail:

<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>
2
Kobi

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

0
omarjebari