VueJS binden Modell an dynamisch eingefügtes Formularelement

Question

Ich verwende VueJS mit einem Formular, und ich habe Probleme mit dynamisch hinzugefügten Eingabefeldern.

Die Form beginnt mit einem einzigen Eingabefeld, in dem jemand eine Nummer, nach dem Vorbild des eingeben:

<input type="text" name="line[1]" v-model="line[1]">

Es ist dann ein weiterer Teil der Seite, die angeblich eine laufende Summe angezeigt werden der in die Zeilen eingegebenen Beträge. Ich verwende eine berechnete Eigenschaft, um dies zu erreichen.

Es funktioniert gut mit allen Feldern, die vorhanden sind, wenn die Seite geladen wird. Der Benutzer kann jedoch auf eine Schaltfläche klicken, um das vorherige Feld zu klonen. Dieses dynamisch hinzugefügte Feld wird nicht in die Berechnungen einbezogen. Ich vermute, das kann aus zwei Gründen sein. Erstens wird das Attribut "v-model" zu dem Zeitpunkt, zu dem das Element geklont wird, nicht mehr gesetzt (da könnte ich mich irren; es wird nicht in der Überprüfung der Chrome-Entwicklerwerkzeuge angezeigt). Zweitens glaube ich nicht, dass Vue über das Element Bescheid weiß, da es nach der Erstellung der Vue-Instanz hinzugefügt wurde.

Gibt es einen guten Weg, damit umzugehen? Ich könnte es mit jQuery brutal erzwingen, da bin ich sicher, aber es muss einen "Vue-Weg" geben.

Answer 1

Mein Vorschlag ist:

<input v-for="line in lines" v-model="line" name="line[]"> 

Set lines als Array in Ihrem data und push neue Elemente hinein.

new Vue({ 
    data: { 
    lines: ['initial text'] 
    }, 
    methods: { 
    addLine: function() { 
     this.lines.push(this.lines[this.lines.length - 1]) 
    } 
    } 
}) 

---

Sie können auch überprüfen, ob Sie nicht unter einem „Änderungserkennung Vorbehalt“ sind. Bitte prüfen ...

VueJS 1:

• Objekte: http://v1.vuejs.org/guide/reactivity.html#Change-Detection-Caveats
• Arrays: http://v1.vuejs.org/guide/list.html#Caveats

VueJS 2:

• Objekte: http://vuejs.org/guide/reactivity.html#Change-Detection-Caveats
• Arrays : http://vuejs.org/guide/list.html#Caveats