Come disabilitare condizionalmente l'input in vue.js

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

validatedessendo un boolean, può essere uno 0o 1, ma indipendentemente dal valore memorizzato nel database, il mio input è sempre disabilitato.

Ho bisogno che l'input sia disabilitato se false, altrimenti dovrebbe essere abilitato e modificabile.

Aggiornare:

In questo modo si abilita sempre l'input (indipendentemente dal fatto che io abbia 0 o 1 nel database):

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

In questo modo disabilita sempre l'input (indipendentemente dal fatto che abbia 0 o 1 nel database):

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

Per rimuovere l'elica disabilitata, è necessario impostarne il valore su false. Questo deve essere il valore booleano per false, non la stringa 'false'.

Quindi, se il valore per validatedè 1 o 0, imposta condizionalmente il disabledprop in base a quel valore. Per esempio:

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

Ecco un esempio

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>

potresti avere una proprietà calcolata che restituisce un valore booleano dipendente dai criteri di cui hai bisogno.

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

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

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

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

L'attributo disabilitato richiede un valore booleano:

<input :disabled="validated" />

Nota come ho verificato solo se validated- Questo dovrebbe funzionare come 0 is falsey... ad es

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

1 is in fact considered to be true

Per fare molta attenzione prova: <input :disabled="!!validated" />

Questa doppia negazione trasforma il falseyo truthyvalore 0o 1per falseotrue

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

Inoltre, per assicurarti che il tuo numero 1o 0arrivi sicuramente come Numero e non come Stringa '1'o '0'precomponi il valore che stai controllando con un +esempio<input :disabled="!!+validated"/> ciò trasforma una stringa di un numero in un numero, ad esempio

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

È possibile manipolare :disabledattributo nel vue.js .

Accetterà un valore booleano, se è vero , quindi l'ingresso verrà disabilitato, altrimenti sarà abilitato ...

Qualcosa come strutturato come sotto nel tuo caso, ad esempio:

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

Leggi anche qui sotto:

Disabilitazione condizionale degli elementi di input tramite l'espressione JavaScript

È possibile disabilitare condizionalmente gli elementi di input in linea con un'espressione JavaScript. Questo approccio compatto offre un modo rapido per applicare una logica condizionale semplice. Ad esempio, se hai solo bisogno di controllare la lunghezza della password, potresti considerare di fare qualcosa del genere.

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

È possibile creare una proprietà calcolata e abilitare / disabilitare qualsiasi tipo di modulo in base al suo valore.

<template>
    <button class="btn btn-default" :disabled="clickable">Click me</button>
</template>
<script>
     export default{
          computed: {
              clickable() {
                  // if something
                  return true;
              }
          }
     }
</script>

Prova questo

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

Attivare / disattivare l' attributo disabilitato dell'input è stato sorprendentemente complesso. Il problema per me era duplice:

(1) Ricorda: l'attributo "disabilitato" dell'input NON è un attributo booleano .
La semplice presenza dell'attributo significa che l'ingresso è disabilitato.

Tuttavia, i creatori di Vue.js hanno preparato questo ... https://vuejs.org/v2/guide/syntax.html#Attributes

(Grazie a @connexo per questo ... Come aggiungere l'attributo disabilitato nel testo di input in vuejs? )

(2) Inoltre, c'era un problema di re-rendering del timing DOM che stavo riscontrando. Il DOM non si stava aggiornando quando ho provato a tornare indietro.

In determinate situazioni, "il componente non verrà nuovamente riprodotto immediatamente. Si aggiornerà nel prossimo" tick "."

Dai documenti Vue.js: https://vuejs.org/v2/guide/reactivity.html

La soluzione era usare:

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

Flusso di lavoro di esempio più completo:

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

È possibile utilizzare questa condizione aggiuntiva.

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

Tieni presente che i set / mappe ES6 non sembrano essere reattivi per quanto posso dire, al momento della scrittura.