Domanda vue.js disabilita l'input condizionalmente


Ho un input

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

e nel mio componente Vue.js, ho,

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

validated essere boolean viene 0 o 1, ma indipendentemente dal valore memorizzato nel database, il mio input è sempre disabilitato

Ho bisogno di input per essere disabilitato se falso, altrimenti, modificabile

Aggiornare:

facendo questo sempre Abilita l'input (non importa se ho 0 o 1 nel database)

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

Fallo sempre Disabilitato l'input (non importa se ho 0 o 1 nel database)

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

105
2018-06-28 19:54


origine


risposte:


Per rimuovere la proprietà disabilitata, dovresti impostare il suo valore su false. Questo deve essere il valore booleano per false, non la stringa 'false'.

Quindi, se il valore per validated è un 1 o uno 0, quindi imposta condizionatamente il disabled prop basato su tale valore. Per esempio.:

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

Ecco un esempio.


194
2018-06-28 20:17



potresti avere una proprietà calcolata che restituisce un valore booleano dipendente da qualunque criterio tu abbia bisogno.

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

quindi metti la tua logica in una proprietà calcolata ...

computed: {
  isDisabled() {
    // evaluate whatever you need to determine disabled here...
    return this.form.validated;
  }
}

25
2018-06-07 22:13



Non è difficile, controlla questo.

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

jsfiddle


13
2017-12-24 12:31



L'attributo disabilitato richiede un valore booleano:

<input :disabled="validated" />

Notate come ho controllato solo se validated - Dovrebbe funzionare come 0 is falsey ...per esempio

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

1 is in fact considered to be true

Per essere più attento prova: <input :disabled="!!validated" />

Questa doppia negazione trasforma il falsey o truthy valore di 0 o 1 a false o true

non mi credi? entra nella tua console e digita !!0 o !!1 :-)

Inoltre, per assicurarti il ​​tuo numero 1 o 0 stanno sicuramente arrivando come numero e non come stringa '1' o '0' pre-pendere il valore che stai controllando con a + per esempio <input :disabled="!!+validated"/> questo trasforma una stringa di un numero in un numero, ad es

+1 = 1 +'1' = 1 Come ha detto in precedenza David Morrow, potresti mettere la tua logica condizionale in un metodo - questo ti dà di più leggibile codice - ritorna solo dal metodo la condizione che desideri controllare.


4
2017-12-28 16:26



Puoi manipolare :disable attributo in vue.js.

Accetterà un booleano, se lo è vero, quindi l'input viene disabilitato, altrimenti sarà abilitato ...

Ad esempio, qualcosa di simile al seguente nel tuo caso:

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

Leggi anche questo di seguito:

Disabilitazione condizionale degli elementi di input tramite JavaScript   Espressione

 È possibile disabilitare in modo condizionale gli elementi di input in linea   con un'espressione JavaScript. Questo approccio compatto fornisce un rapido   modo di applicare una semplice logica condizionale. Ad esempio, se hai solo bisogno   per verificare la lunghezza della password, potresti prendere in considerazione l'idea di fare qualcosa   come questo.

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

2
2018-02-18 10:13



Può usare questa condizione di aggiunta.

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

0
2018-06-13 03:22