vue.js disabilita l'input condizionalmente

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

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

Il tuo attributo disabilitato richiede un valore booleano:

<input :disabled="validated" />

Notate come ho controllato 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 essere più attento prova: <input :disabled="!!validated" />

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

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

Inoltre, per assicurarti che il tuo numero 1 o 0 stiano sicuramente arrivando come numero e non come stringa '1' o '0' prima del valore che stai controllando con un + e.g <input :disabled="!!+validated"/> questo trasforma una stringa di un numero in un numero e.g

+1 = 1 +'1' = 1 Come David Morrow ha detto in precedenza, puoi mettere la tua logica condizionale in un metodo - questo ti dà più readable code - basta restituire al metodo la condizione che desideri controllare.

Puoi manipolare l'attributo :disabled in vue.js .

Accetterà un booleano, se è true , 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 Expression

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

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

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>

Per alternare l'inputdisabilitatoattribute era sorprendentemente complesso. Il problema per me era duplice:

(1) Ricorda: l'attributo "disabled" dell'input è NOT a Boolean attribute.
La semplice presenza dell'attributo significa che l'input è 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 attributi disabilitati nel testo di input in vuejs? )

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

In determinate situazioni, "il componente non verrà riprodotto immediatamente. Si aggiornerà nel prossimo" segno di spunta "."

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

La soluzione era usare:

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

Flusso di lavoro di esempio 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>

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

Tieni presente che gli insiemi/mappe ES6 non sembrano essere reattivi per quanto ne so, al momento della scrittura.