vue.js desactivar la entrada condicionalmente

Podría tener una propiedad calculada que devuelve un booleano dependiente de cualquier criterio que necesite.

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

Luego coloque su lógica en una propiedad computada...

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

No es difícil, compruebe 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 disabled requiere un valor booleano:

<input :disabled="validated" />

Observe cómo solo he comprobado 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 ser extra cuidadoso intente: <input :disabled="!!validated" />

Esta doble negación se convierte el falsey o truthy valor de 0 o 1 a false o true

¿No me crees? entra en tu consola y escribe !!0 o !!1 :-)

También, para asegurarse de que su número 1 o 0 son definitivamente viene como un Número y no la Cadena '1' o '0' anteponer el valor que está comprobando con un + e. g {[19] } esto convierte una cadena de un número en un Número e.g

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

Puede manipular el atributo :disable en vue.js .

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

Algo 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 JavaScript Expression

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

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

Puede usar esta condición add.

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