Wie man Eingangs Lesen, nur auf der Basis bestimmter Wert in Vue?

Wie man ein input-Feld Lesen, nur auf Basis der Vue-Daten?

Beispiel:

<select class="form-control" 
        id="selectCategory" 
        :disabled="cat_id >= 
            1" 
        name="cat_id">

Ich möchte das Feld nur gelesen, aber nicht deaktiviert. Wie kann ich das erreichen?

InformationsquelleAutor Neha | 2018-02-13
  1. 14

    Bitte beachten Sie, dass, entsprechend der HTML-Spezifikationen, wird das select-tag in HTML, nicht mit einem readonly-Attribut.

    Jedoch im Allgemeinen Fall, würde ich gehen mit so etwas wie dies:

    <input class="form-control" id="selectCategory" :readonly="cat_id >= 1">

    Grundsätzlich die Dokumentation sagt, dass, wenn ein Attribut-Wert zu false ausgewertet, dann wird das Attribut weggelassen. Sehen hier für weitere details.

    InformationsquelleAutor P3trur0
  2. 1

    Können Sie etwas wie das hier tun: 

    <input v-bind:readonly="isReadOnly">
    InformationsquelleAutor John Rajan
  3. 0

    Ich lief in dieses Problem während der Herstellung einer form für einen Passwort ändern Formular, und ich würde der browser versuchen, AutoVervollständigen alles. Dies soll verhindern, dass die AutoVervollständigen-von Brand-und bieten auch eine Methode, um den Wert zu ändern, um Ihre Bedürfnisse anzupassen.

    Aus irgendeinem Grund, hinzufügen von einem v-Bindung:readonly-Eigenschaft true, wird wieder readonly="readonly"

    Hier ist mein derzeit arbeiten Beispiel, die entfernt und neu hinzufügt, die readonly-Eigenschaft auf focusout.

    Vue Vorlage HTML 

    <input type="password" v-model="user.password" placeholder="Password" @focusin="toggleReadonly" @focusout="toggleReadonly" :readonly="true">

    Methode 

    toggleReadonly(event){
          event.preventDefault()
          if(event.target.getAttribute('readonly') == 'readonly'){
              event.target.removeAttribute('readonly')
          }
          else{
              event.target.setAttribute('readonly', 'readonly')
         }
 }
    • autocomplete="off" um zu verhindern, dass ein input autocomplete
    • <input type="password" v-model="user.password" Platzhalter="Passwort" autocomplete="off">
    InformationsquelleAutor MyEmpireOfDuctTape
  4. -1

    könnten Sie haben eine berechnete Eigenschaft gibt einen booleschen Wert zurück abhängig was auch immer Kriterien, die Sie benötigen.

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

    dann Ihre Logik in eine berechnete Eigenschaft...

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

    JSFIDDLE
    https://jsfiddle.net/sureshamk/0dzvcf4d/1320/

    • Deaktiviert ist nicht die gleiche wie readonly. Ein deaktiviertes Feld in einem Formular nicht eingereicht werden, während ein readonly wird. Weitere CSS-Stile sind nicht das gleiche für readonly und disabled.
    InformationsquelleAutor Suresh Velusamy
Schreibe einen Kommentar