Cómo deshabilitar la entrada condicionalmente en vue.js

Tengo una entrada:

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

y en mi componente Vue.js, tengo:

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

validatedsiendo un boolean, puede ser uno 0o 1, pero no importa qué valor esté almacenado en la base de datos, mi entrada siempre está deshabilitada.

Necesito que la entrada esté deshabilitada si false, de lo contrario, debería estar habilitada y editable.

Actualizar:

Hacer esto siempre habilita la entrada (no importa que tenga 0 o 1 en la base de datos):

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

Hacer esto siempre deshabilitó la entrada (no importa que tenga 0 o 1 en la base de datos):

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

Para eliminar el accesorio deshabilitado, debe establecer su valor en false. Este debe ser el valor booleano para false, no la cadena 'false'.

Por lo tanto, si el valor de validatedes un 1 o un 0, establezca condicionalmente el disabledaccesorio basado en ese valor. P.ej:

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

Aquí hay un ejemplo.

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>

podría tener una propiedad calculada que devuelva un valor booleano dependiente de los criterios que necesite.

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

luego ponga su lógica en una propiedad calculada ...

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

No es difícil, mira esto.

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

jsfiddle

Su atributo deshabilitado requiere un valor booleano:

<input :disabled="validated" />

Observe cómo solo he verificado si validated: esto debería funcionar como 0 is falsey... por ejemplo

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

1 is in fact considered to be true

Para tener más cuidado, intente: <input :disabled="!!validated" />

Esta doble negación convierte el falseyo truthyvalor de 0o 1a falseotrue

no me crees? entra a tu consola y escribe !!0o !!1:-)

Además, para asegurarse de que su número 1o 0definitivamente aparece como un Número y no como la Cadena '1'o '0'anteponer el valor que está verificando con, +por ejemplo, <input :disabled="!!+validated"/>esto convierte una cadena de un número en un Número, por ejemplo

+1 = 1 +'1' = 1 Como dijo David Morrow anteriormente, podría poner su lógica condicional en un método, esto le da un código más legible , simplemente devuelva del método la condición que desea verificar.

Puede manipular :disabledatributo en vue.js .

Aceptará un valor booleano, si es cierto , la entrada se deshabilita, de lo contrario se habilitará ...

Algo así como estructurado como a continuación en su caso, por ejemplo:

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

También lea esto a continuación:

Deshabilitar condicionalmente los elementos de entrada a través de la expresión de JavaScript

Puede deshabilitar condicionalmente los elementos de entrada en línea con una expresión de JavaScript. Este enfoque compacto proporciona una forma rápida de aplicar una lógica condicional simple. Por ejemplo, si solo necesita verificar la longitud de la contraseña, puede considerar hacer algo como esto.

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

Puede hacer una propiedad calculada y habilitar / deshabilitar cualquier tipo de formulario de acuerdo con su valor.

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

Prueba esto

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

Para alternar el atributo deshabilitado de la entrada fue sorprendentemente complejo. El problema para mí fue doble:

(1) Recuerde: el atributo "deshabilitado" de la entrada NO es un atributo booleano .
La mera presencia del atributo significa que la entrada está deshabilitada.

Sin embargo, los creadores de Vue.js han preparado esto ... https://vuejs.org/v2/guide/syntax.html#Attributes

(Gracias a @connexo por esto ... ¿Cómo agregar un atributo deshabilitado en el texto de entrada en vuejs? )

(2) Además, había un problema de representación de temporización DOM que estaba teniendo. El DOM no se estaba actualizando cuando traté de alternar.

En ciertas situaciones, "el componente no se volverá a procesar de inmediato. Se actualizará en el próximo 'tick'".

De los documentos de Vue.js: https://vuejs.org/v2/guide/reactivity.html

La solución fue usar:

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

Flujo de trabajo de ejemplo más 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>

Puede usar esta condición adicional.

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

Tenga en cuenta que los conjuntos / mapas de ES6 no parecen ser reactivos hasta donde puedo decir, al momento de escribir.