Como desativar a entrada condicionalmente no vue.js

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

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>

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

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

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>

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>

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

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>

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>

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