Platzhalter für wählen Sie in vuejs 2.0.0

Ich bin erstellen einer webapp mit vuejs 2.0. Ich angelegt haben, wählen Sie einfach die Eingabe mit dem folgenden code:

  <select v-model="age">
    <option value="" disabled selected hidden>Select Age</option>
    <option value="1"> 1 Year</option>
    <option value="11"> 11 Year</option>
  </select>

und ich habe dies in data meiner Vue-Komponente:

data () {
  return {
    age: "",
  }
},
watch: {      
  age: function (newAge) {
    console.log("log here")
  }

Aber ich Kriege diesen Fehler beim hinzufügen der default-Wert für wählen:

FEHLER in ./~/vue-loader/lib/template-compiler.js?id=data-v-5cf0d7e0!./~/vue-loader/lib/selector.js?type=template&index=0!./src/components/cde.vue
template syntax-Fehler :
inline ausgewählten Attribute werden ignoriert, wenn mit dem v-Modell. Deklarieren Sie die ursprünglichen Werte in der Komponente Daten-option statt.

@ ./src/components/cde.vue 10:23-151

@ ./~/babel-loader!./~/vue-loader/lib/selector.js?
Typ=Skripts&index=0!./src/views/abcView.vue
@ ./src/views/abcView.vue

@ ./src/router/index.js

@ ./src/app.js

@ ./src/client-entry.js

@ multi-app

Habe ich versucht zu geben, default-Wert in der data-Abschnitts der Komponente als gut, aber dann passierte nichts. Ich habe versucht v-bind auch, aber dann watchers aufgehört zu arbeiten auf variable Alter.

  • jsfiddle.net/vjvMp/668 Scheint gut zu funktionieren
  • Ja, es funktioniert, wenn ich entfernt, ausgewählt von der Standard-Optionen. Danke @haim770
InformationsquelleAutor Saurabh | 2016-11-02
  1. 20

    Das einzige, was benötigt wird, um diese Arbeit war entfernen selected von Standard -option: 

     <select v-model="age">
    <option value="" disabled hidden>Select Age</option>
    .....
  </select>
    • Ja, wenn Sie wollen, dass etwas pre-ausgewählt ist, müssen Sie den Wert festlegen, wie this.age="1", die Ergebnisse in "1 Jahr" werden automatisch ausgewählt, wenn der DOM macht.
    InformationsquelleAutor Saurabh
  2. 20

    Für andere, die möglicherweise Landung auf diese Frage, es war ein weiterer Schritt für mich, um die Standard-option angezeigt. In meinem Fall, die v-model ich war die Bindung an wurde wieder null und eher als eine leere Zeichenfolge. Dies bedeutete, dass die Standard-option wurde nie ausgewählt, sobald Vue Bindungen getreten.

    Zu lösen, für das einfache binden der value Eigenschaft des Standard-option, um null:

    <select v-model="age">
  <option :value="null" disabled>Select Age</option>
  ...
</select>

    http://jsfiddle.net/2Logme0m/1/

    • Plus: hinzufügen deaktiviert, und die verborgenen Eigenschaften verstecken können die Platzhalter aus der Liste der Optionen. z.B. <option :value="null" deaktiviert hidden>Wählen Sie Age</option>
    InformationsquelleAutor Albert Martin
Schreibe einen Kommentar