Cómo deshabilitar la entrada condicionalmente en vue.js


277

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 : ''">

Respuestas:


484

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>


en mi base de datos, tengo 0 y 1 almacenado para verdadero y falso, jugando con su violín, 0 y 1 lo mantiene desactivado
Zaffar Saffee

¿Necesito editar mi estructura db para que sea exactamente verdadera y falsa?
Zaffar Saffee

No, solo establezca el valor en cualquiera trueo falsedependiendo del valor del elemento en su base de datos
asemahle

11
solo hazlo:: disabled = "validado" Siempre que validado sea Verdadero / falso o 0/1, Javascript lo sabrá.
Despertaweb

1
@gk el código que estaba en el jsfiddle ahora está en la respuesta
asemahle

63

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

Esto funcionó para mí, no se necesitan comillas, en mi caso llamando isDisabled()dentro del HTML, definido en Data.
Leo

Definitivamente me gusta mucho más ordenado
Shady Echo 419

¿Por qué no se necesitan citas?
Ferkze

23

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 componente necesita atributos de datos con deshabilitado: tipo falso o booleano.
Sebastiao Marcos, el

15

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.


11

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>

7

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>

1
En mi opinión, esta es la respuesta más fácil de leer y aplicar al caso de uso.
Giorgio Tempesta

1
Esto fue lo único que funcionó para mí. para mover el método a calculado en lugar de métodos. ¡Gracias!
jokab

6

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

4

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>

++ (Sin embargo, los creadores de Vue.js han preparado esto ... vuejs.org/v2/guide/syntax.html#Attributes )
Rytis Dereskevicius el

2

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>

0

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

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.