javascript - example - vue router

Cómo deshabilitar la entrada condicionalmente en vue.js

Question

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

validated como boolean , puede ser 0 o 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 es 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 : ''''">

Answer 1

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

Answer 2

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

Answer 3

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 para validated es 1 o 0, establezca condicionalmente el accesorio disabled función de ese valor. P.ej:

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

Aquí hay un ejemplo .

Answer 4

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

Answer 5

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>

Answer 6

Puede manipular :disabled atributo :disabled 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 mediante 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>

Answer 7

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>

Answer 8

Su atributo deshabilitado requiere un valor booleano:

<input :disabled="validated" />

Observe que solo he verificado si está validated : esto debería funcionar ya que 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 valor false o true de 0 o 1 en false o true

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

Además, para asegurarse de que su número 1 o 0 definitivamente aparece como un Número y no la Cadena ''1'' o ''0'' preincluye el valor que está verificando con un + eg <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.

Answer 9

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

Answer 10

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