Como desativar a entrada condicionalmente no vue.js


277

Eu tenho uma entrada:

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

e no meu componente Vue.js, tenho:

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

validatedsendo um boolean, pode ser um 0ou 1, mas, independentemente do valor armazenado no banco de dados, minha entrada está sempre desativada.

Preciso que a entrada seja desabilitada se false, caso contrário, ela deve ser ativada e editável.

Atualizar:

Fazer isso sempre ativa a entrada (independentemente de eu ter 0 ou 1 no banco de dados):

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

Fazer isso sempre desabilitou a entrada (independentemente de eu ter 0 ou 1 no banco de dados):

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

Respostas:


484

Para remover o suporte desativado, defina seu valor como false. Isso precisa ser o valor booleano para false, não a string 'false'.

Portanto, se o valor de validatedfor 1 ou 0, defina condicionalmente o disabledsuporte com base nesse valor. Por exemplo:

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

Aqui está um exemplo.

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>


no meu db, eu tenho 0 e 1 armazenados para o verdadeiro eo falso, brincando com seu violino, 0 e 1 mantém desativado
Zaffar Saffee

preciso editar minha estrutura db para torná-la exatamente verdadeira e falsa?
Zaffar Saffee

Não, apenas definir o valor a qualquer trueou false, dependendo do valor do item em seu db
asemahle

11
apenas faça:: disabled = "validated" Enquanto validado for True / false ou 0/1, o Javascript saberá.
Despertaweb

1
@gk o código que estava no jsFiddle está agora na resposta
asemahle

63

você pode ter uma propriedade computada que retorna um valor booleano, dependendo de qualquer critério necessário.

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

então coloque sua lógica em uma propriedade computada ...

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

Isso funcionou para mim, sem aspas necessárias, no meu caso chamando isDisabled()dentro do HTML, definido em Data.
Leo

I como este definitivamente muito mais puro
Shady Eco 419

Por que nenhuma cotação é necessária?
Ferkze 03/02

23

Não é difícil, verifique isso.

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

jsfiddle


seu componente precisa de atributos de dados com disabled: tipo false ou booleano.
Sebastiao Marcos

15

Seu atributo desativado requer um valor booleano:

<input :disabled="validated" />

Observe como eu só verifiquei se validated- Isso deve funcionar como 0 is falsey... por exemplo

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

1 is in fact considered to be true

Para ter um cuidado extra, tente: <input :disabled="!!validated" />

Esta dupla negação transforma o falseyou truthyvalor de 0ou 1para falseoutrue

não acredita em mim? entre no seu console e digite !!0ou !!1:-)

Além disso, para garantir que seu número 1ou 0definitivamente esteja sendo transmitido como um número e não como a seqüência de caracteres '1'ou '0'pré-pendure o valor que você está verificando com, por +exemplo, <input :disabled="!!+validated"/>isso transforma uma sequência de números em um número, por exemplo

+1 = 1 +'1' = 1 Como David Morrow disse acima, você pode colocar sua lógica condicional em um método - isso fornece um código mais legível - basta retornar do método a condição que você deseja verificar.


11

Você pode manipular :disabledatributo no vue.js .

Ele aceitará um booleano, se for verdade , a entrada será desativada, caso contrário, será ativada ...

Algo como estruturado como abaixo no seu caso, por exemplo:

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

Leia também abaixo:

Desabilitando condicionalmente os elementos de entrada via expressão JavaScript

Você pode desabilitar condicionalmente os elementos de entrada embutidos com uma expressão JavaScript. Essa abordagem compacta fornece uma maneira rápida de aplicar lógica condicional simples. Por exemplo, se você só precisou verificar o tamanho da senha, considere fazer algo assim.

<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

Você pode criar uma propriedade computada e ativar / desativar qualquer tipo de formulário de acordo com seu valor.

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

1
Esta é a resposta mais fácil de ler e aplicar ao caso de uso de alguém, na minha opinião.
Giorgio Tempesta

1
essa foi a única coisa que funcionou para mim. para mover o método para computado em vez de métodos. obrigado!
Jokab 26/08/19

6

Tente isto

 <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

Alternar o atributo desativado da entrada era surpreendentemente complexo. A questão para mim era dupla:

(1) Lembre-se: o atributo "disabled" da entrada NÃO é um atributo booleano .
A mera presença do atributo significa que a entrada está desativada.

No entanto, os criadores do Vue.js prepararam isso ... https://vuejs.org/v2/guide/syntax.html#Attributes

(Obrigado ao @connexo por isso ... Como adicionar atributo desabilitado no texto de entrada no vuejs? )

(2) Além disso, havia um problema de re-renderização do tempo do DOM que eu estava tendo. O DOM não estava sendo atualizado quando tentei voltar.

Em determinadas situações, "o componente não será renderizado imediatamente. Ele será atualizado no próximo 'tick'."

Dos documentos do Vue.js: https://vuejs.org/v2/guide/reactivity.html

A solução foi usar:

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

Exemplo de fluxo de trabalho mais 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>

++ (No entanto, os criadores do Vue.js. prepararam isso ... vuejs.org/v2/guide/syntax.html#Attributes ) #
Rytis Dereskevicius

2

Pode usar esta condição de adição.

  <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

Lembre-se de que os Conjuntos / Mapas ES6 não parecem ser reativos, até onde eu sei, no momento em que escrevo.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.