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

277

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 : ''">
Zaffar Saffee
źródło

Odpowiedzi:

484

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>

asemahle
źródło
w mojej bazie danych mam 0 i 1 zapisane jako prawda i fałsz, bawiąc się skrzypcami, 0 i 1 utrzymuje je wyłączone
Zaffar Saffee
czy muszę edytować strukturę db, aby była dokładnie prawdą i fałszem?
Zaffar Saffee
Nie, wystarczy ustawić wartość na jedną truelub w falsezależności od wartości elementu w db
asemahle
11
po prostu zrób:: disabled = "validated" Tak długo, jak zatwierdzony jest True / false lub 0/1, JavaScript będzie wiedział.
Despertaweb,
1
@gk kod, który był w jsfiddle jest teraz w odpowiedzi
asemahle
63

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;
  }
}
David Morrow
źródło
To zadziałało dla mnie, nie potrzeba cytatów, w moim przypadku wywołanie isDisabled()w HTML, zdefiniowane w Data.
Lew
Lubię to zdecydowanie lepiej
Shady Echo 419
Dlaczego nie są potrzebne cytaty?
Ferkze
23

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

Sebastiao Marcos
źródło
komponent potrzebujesz attrów danych z wyłączonym: fałszem lub typem logicznym.
Sebastiao Marcos,
15

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

Francis Leigh
źródło
11

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>
Alireza
źródło
7

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>
Yamen Ashraf
źródło
1
Moim zdaniem jest to najłatwiejsza odpowiedź do przeczytania i zastosowania w przypadku użycia.
Giorgio Tempesta
1
to była jedyna rzecz, która działała dla mnie. aby przenieść metodę na obliczoną zamiast metod. dzięki!
jokab
6

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;
    }
  }
})
Atchutha rama reddy Karri
źródło
4

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>
Kobi
źródło
++ (Jednak twórcy Vue.js przygotowali to ... vuejs.org/v2/guide/syntax.html#Attributes )
Rytis Dereskevicius
2

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>
anson
źródło
0

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

omarjebari
źródło