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

validatedAls a booleankann es entweder 0oder sein 1, aber egal welcher Wert in der Datenbank gespeichert ist, meine Eingabe ist immer deaktiviert.

Ich muss den Eingang deaktivieren, wenn falseer aktiviert und bearbeitet werden kann.

Aktualisieren:

Dadurch immer ermöglicht die Eingabe (keine Rolle , 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">

Dadurch wurde die Eingabe immer deaktiviert (egal, ob ich 0 oder 1 in der Datenbank habe):

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

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

Wenn der Wert für validatedentweder eine 1 oder eine 0 ist, setzen Sie die disabledRequisite basierend auf diesem Wert bedingt . Z.B:

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

Hier ist ein Beispiel.

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>

Sie könnten eine berechnete Eigenschaft haben, die einen Booleschen Wert zurückgibt, abhängig von den Kriterien, die Sie benötigen.

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

Dann legen 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, wie ich nur überprüft habe, ob validated- Dies sollte funktionieren als 0 is falsey... 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, versuchen Sie: <input :disabled="!!validated" />

Diese doppelte Negation dreht den falseyoder truthy-Wert von 0oder 1zu falseodertrue

Glaubst du mir nicht? Gehe in deine Konsole und tippe !!0oder !!1:-)

Um sicherzustellen, dass Ihre Nummer 1oder 0definitiv als Nummer und nicht als Zeichenfolge durchkommt, '1'oder um '0'den Wert, den Sie mit einem +z. B. überprüfen, vorauszusetzen, wird aus <input :disabled="!!+validated"/>einem String einer Zahl eine Zahl, z

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

Sie können das :disabledAttribut in vue.js bearbeiten .

Es akzeptiert einen Booleschen Wert. Wenn dies der Fall ist , wird die Eingabe deaktiviert, andernfalls wird sie aktiviert ...

So etwas wie 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 dies auch unten:

Eingabeelemente über JavaScript-Ausdruck bedingt deaktivieren

Sie können Eingabeelemente inline mit einem JavaScript-Ausdruck bedingt deaktivieren. Dieser kompakte Ansatz bietet eine schnelle Möglichkeit, einfache bedingte Logik anzuwenden. Wenn Sie beispielsweise nur die Länge des Kennworts überprüfen müssen, können Sie Folgendes 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;
    }
  }
})

Das Deaktivieren des deaktivierten Attributs der Eingabe war überraschend komplex. Für mich gab es zwei Probleme:

(1) Denken Sie daran: Das Attribut "deaktiviert" der Eingabe ist KEIN Boolesches Attribut.
Das bloße Vorhandensein des Attributs bedeutet, dass die Eingabe deaktiviert ist.

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

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

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

In bestimmten Situationen wird "die Komponente nicht sofort neu gerendert. Sie wird im nächsten 'Tick' aktualisiert."

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

Die Lösung war zu verwenden:

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

Vollständigerer Beispielworkflow:

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

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>

Denken Sie daran, dass ES6-Sets / Karten zum Zeitpunkt des Schreibens nicht reaktiv zu sein scheinen, soweit ich das beurteilen kann.