Jak wyłączyć wejście warunkowo w vue.js

Mam dane wejściowe:

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

i w moim komponencie Vue.js mam:

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

validatedbycie boolean, może to być 0albo 1, ale bez względu na to, jakie wartości są przechowywane w bazie danych, mój wkład jest zawsze wyłączona.

Potrzebuję, aby dane wejściowe były wyłączone, jeśli falsew przeciwnym razie powinny być włączone i można je edytować.

Aktualizacja:

W ten sposób zawsze włącza się dane wejściowe (bez względu na to, czy mam 0 lub 1 w bazie danych):

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

Wykonanie tego zawsze wyłączało dane wejściowe (bez względu na to, że mam 0 lub 1 w bazie danych):

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

Aby usunąć wyłączony rekwizyt, powinieneś ustawić jego wartość na false. To musi być wartość logiczna false, a nie ciąg 'false'.

Jeśli więc wartość validatedwynosi 1 lub 0, warunkowo ustaw disabledrekwizyt na podstawie tej wartości. Na przykład:

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

Oto przykład.

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>

możesz mieć obliczoną właściwość, która zwraca wartość logiczną zależną od potrzebnych kryteriów.

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

następnie umieść swoją logikę we właściwościach obliczeniowych ...

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

Nie trudne, sprawdź to.

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

jsfiddle

Twój wyłączony atrybut wymaga wartości logicznej:

<input :disabled="validated" />

Zauważ, że sprawdziłem tylko, jeśli validated- To powinno działać jak 0 is falsey... np

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

1 is in fact considered to be true

Aby zachować szczególną ostrożność, spróbuj: <input :disabled="!!validated" />

Ta podwójna negacja włącza falseylub truthywartości 0albo 1do falselubtrue

nie wierzysz mi? wejdź do konsoli i wpisz !!0lub !!1:-)

Ponadto, aby upewnić się, że Twój numer 1lub na 0pewno przechodzi jako liczba, a nie ciąg znaków '1'lub '0'wstępnie sprawdzana wartość, którą sprawdzasz, +np. <input :disabled="!!+validated"/>Zamienia ciąg liczby na liczbę np.

+1 = 1 +'1' = 1 Jak powiedział wcześniej David Morrow, możesz zastosować logikę warunkową w metodzie - daje to bardziej czytelny kod - po prostu powróć z metody warunek, który chcesz sprawdzić.

Możesz manipulować :disabledatrybutem w vue.js .

Przyjmie wartość logiczną, jeśli to prawda , wówczas wejście zostanie wyłączone, w przeciwnym razie zostanie włączone ...

Coś takiego jak ustrukturyzowane jak poniżej w twoim przypadku na przykład:

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

Przeczytaj także poniżej:

Warunkowe wyłączenie elementów wejściowych za pomocą wyrażenia JavaScript

Można warunkowo wyłączyć elementy wejściowe wbudowane za pomocą wyrażenia JavaScript. To kompaktowe podejście zapewnia szybki sposób zastosowania prostej logiki warunkowej. Na przykład, jeśli potrzebujesz tylko sprawdzić długość hasła, możesz rozważyć zrobienie czegoś takiego.

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

Możesz utworzyć obliczoną właściwość i włączyć / wyłączyć dowolny typ formularza zgodnie z jego wartością.

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

Spróbuj tego

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

Przełączanie wyłączonego atrybutu wejścia było zaskakująco skomplikowane. Problem był dla mnie dwojaki:

(1) Pamiętaj: atrybut „disabled” wejścia NIE jest atrybutem boolowskim .
Sama obecność atrybutu oznacza, że wejście jest wyłączone.

Jednak twórcy Vue.js przygotowali to ... https://vuejs.org/v2/guide/syntax.html#Attributes

(Dzięki @connexo za to ... Jak dodać wyłączony atrybut w tekście wejściowym w vuejs? )

(2) Ponadto miałem problem z ponownym renderowaniem taktowania DOM. DOM nie aktualizował się, gdy próbowałem przełączyć z powrotem.

W niektórych sytuacjach „składnik nie zostanie ponownie renderowany od razu. Zostanie zaktualizowany w następnym„ tiku ”.

Z dokumentacji Vue.js: https://vuejs.org/v2/guide/reactivity.html

Rozwiązaniem było użycie:

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

Pełniejszy przykładowy przepływ pracy:

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

Można użyć tego warunku dodania.

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

Należy pamiętać, że zestawy / mapy ES6 nie wydają się być reaktywne, o ile wiem, w momencie pisania.