So deaktivieren Sie die Eingabe in vue.js bedingt

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

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

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.

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>

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>

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>

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>

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