it-swarm.com.de

So deaktivieren Sie die Eingabe in vue.js bedingt

Ich habe eine Eingabe:

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

und in meiner Vue.js-Komponente habe ich:

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

validated Da es sich um ein boolean handelt, kann es entweder 0 oder 1 sein. Unabhängig davon, welcher Wert in der Datenbank gespeichert ist, ist meine Eingabe immer deaktiviert.

Ich muss den Eingang deaktivieren, wenn false, andernfalls sollte es aktiviert und editierbar sein.

Aktualisieren:

Tun Sie dies immer aktiviert die Eingabe (egal, ich habe 0 oder 1 in der Datenbank):

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

Tun Sie dies immer deaktiviert die Eingabe (egal, ich habe 0 oder 1 in der Datenbank):

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

Um die deaktivierte Requisite zu entfernen, sollten Sie ihren Wert auf false setzen. Dies muss der Boolesche Wert für false sein, nicht die Zeichenfolge 'false'.

Wenn der Wert für validated entweder 1 oder 0 ist, setzen Sie die Stütze disabled bedingt auf diesen Wert. Z.B.:

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

Hier ist ein Beispiel .

380
asemahle

sie könnten eine berechnete Eigenschaft haben, die einen Booleschen Wert zurückgibt, der von den von Ihnen benötigten Kriterien abhängt.

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

dann setzen Sie Ihre Logik in eine berechnete Eigenschaft ...

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

Nicht schwer, überprüfen Sie dies.

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

jsfiddle

20

Ihr deaktiviertes Attribut erfordert einen booleschen Wert:

<input :disabled="validated" />

Beachten Sie, dass ich nur überprüft habe, ob validated - Dies sollte als 0 is falsey funktionieren ... z

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

1 is in fact considered to be true

Um besonders vorsichtig zu sein: <input :disabled="!!validated" />

Diese doppelte Verneinung macht den falsey oder truthy Wert von 0 oder 1 zu false oder true

glaubst du mir nicht gehe in deine Konsole und tippe !!0 oder !!1 :-)

Stellen Sie außerdem sicher, dass Ihre Nummer 1 oder 0 definitiv als Zahl und nicht die Zeichenfolge '1' oder '0' vor dem zu überprüfenden Wert steht + zB <input :disabled="!!+validated"/> dies verwandelt eine Zeichenkette einer Zahl in eine Zahl zB

+1 = 1 +'1' = 1 Wie David Morrow oben sagte, können Sie Ihre bedingte Logik in eine Methode einfügen - dies gibt Ihnen mehr lesbaren Code - geben Sie aus der Methode einfach die Bedingung zurück, die Sie überprüfen möchten.

14
Francis Leigh

Sie können das :disabled -Attribut in vue.js bearbeiten.

Es akzeptiert einen Booleschen Wert, wenn es true ist, wird die Eingabe deaktiviert, andernfalls wird sie aktiviert ...

So ähnlich strukturiert wie unten in Ihrem Fall zum Beispiel:

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

Lesen Sie auch dies unten:

Bedingtes Deaktivieren von Eingabeelementen über JavaScript-Ausdruck

Sie können Eingabeelemente inline mit einem JavaScript-Ausdruck bedingt deaktivieren. Dieser kompakte Ansatz bietet eine schnelle Möglichkeit, einfache Bedingungslogik anzuwenden. Wenn Sie beispielsweise nur die Länge des Kennworts überprüfen müssen, können Sie dies in Betracht ziehen.
<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>
8
Alireza

Sie können eine berechnete Eigenschaft erstellen und jeden Formulartyp entsprechend seinem Wert aktivieren/deaktivieren.

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

Versuche dies

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

Kann diese Add-Bedingung verwenden.

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

Das deaktivierte Attribut der Eingabe umzuschalten war überraschend komplex. Das Problem für mich war zweierlei:

(1) Beachten Sie, dass das Attribut "disabled" des Eingangs KEIN Boolescher Wert ist Attribut.
Das bloße Vorhandensein des Attributs bedeutet, dass die Eingabe deaktiviert ist.

Die Vue.js-Ersteller haben dies jedoch vorbereitet ... https://vuejs.org/v2/guide/syntax.html#Attributes

(Danke an @connexo dafür ... Wie füge ich in vuejs deaktivierte Attribute in den Eingabetext ein? )

(2) Außerdem gab es ein Problem beim erneuten Rendern des DOM-Timings. Das DOM wurde nicht aktualisiert, als ich versuchte, zurückzuschalten.

In bestimmten Situationen wird "die Komponente nicht sofort neu gerendert. Sie wird beim nächsten 'Häkchen' aktualisiert."

In den Vue.js-Dokumenten: https://vuejs.org/v2/guide/reactivity.html

Die Lösung war zu verwenden:

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

Ausführlicherer Beispiel-Workflow:

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

Denken Sie daran, dass ES6-Sets/Maps zum Zeitpunkt des Schreibens meines Wissens nicht reaktiv zu sein scheinen.

0
omarjebari