Zugriff auf Attribute des letzten Objekts in Array in Vue.js

Question

Ich habe eine Vue.js Javascript-Wand getroffen.

Hier ist mein Code:

<div id="app"> 
    <h1>Things</h1> 
    <div v-for="thing in things"> 
    <input v-model="thing.val"> 
    </div> 
    <button @click="addThing"> 
    NewThing 
    </button> 
    <pre>{{ $data | json }}</pre> 
</div> 
new Vue({ 
    el: '#app', 
    data: { 
    things: [], 
    things2: [], 
    things3: [], 
    things4: [] 
    }, 
    methods: { 
    addFind: function() { 
     this.things.push({ val: '' }); 
     var l = this.things[this.things.length-1]; 
     this.things2.push(l); 
     this.things3.push(l.val); 
     this.things4.push(l["val"]); 
    } 
    } 
}); 

Ausgang für Dinge und things2 ist gut und wie erwartet. Ausgabe für dinge3 und dinge4 ist nicht wie erwartet. Ich kann nicht auf den Wert "val" von Objekten in einem Array zugreifen. Ich bin kein Experte für Javascript-Objekte, aber das sollte funktionieren, oder? Was vermisse ich? Wie greife ich auf "val" zu?

Ausgang:

{ 
    "things": [ 
    { 
     "val": "first" 
    }, 
    { 
     "val": "second" 
    }, 
    { 
     "val": "" 
    } 
    ], 
    "things2": [ 
    { 
     "val": "first" 
    }, 
    { 
     "val": "second" 
    }, 
    { 
     "val": "" 
    } 
    ], 
    "things3": [ 
    "", 
    "", 
    "" 
    ] 
} 

Hier ist eine Demo: https://jsfiddle.net/rcLgmv18/3/

UPDATE: Es ist klar, jetzt, dass aus irgendeinem Grund gibt es ein Objekt am Ende des Arrays mit {val: "" }. Ich bekomme das gewünschte Verhalten (Länge - 2) statt (Länge - 1). Die Frage ist, warum ist das letzte Objekt irgendwie seltsam mit val = ""? Ist es eine Vue.js oder eine Javascript Funktion?

Answer 1

Ich denke @JamesWesc hat die beste Beschreibung gegeben. Ich habe ein bisschen getüftelt, ein paar der Variablen umbenennen, um klarer zu beschreiben, was ich denke, Sie sind nach ...

new Vue({ 
    el: '#app', 
    data: { 
    finds: [], 
    lastFind: {}, 
    lastFindVal: '' 
    }, 
    methods: { 
    addFind: function() { 
     this.finds.push({ val: '' }); 
     this.lastFind = this.finds[this.finds.length-1]; 
     this.lastFindVal = typeof this.lastFind.val; 
    } 
    } 
}); 

Was mir diese Ausgabe gibt, wenn ich zwei hinzufügen „findet“ Eingabefelder eingeben 'ab' in der ersten und 'cd' in der zweiten.

{ 
    "finds": [ 
    { 
     "val": "ab" 
    }, 
    { 
     "val": "cd" 
    } 
    ], 
    "lastFind": { 
    "val": "cd" 
    }, 
    "lastFindVal": "string" 
} 

ich herausfinden kann nicht ganz, warum ich nicht lastFindVal zur Ausgabe "cd" bekommen kann, aber ich bin kein Entwickler Vue. Sie können jedoch sehen, dass es sich um eine Zeichenfolge handelt und dass es sich um eine leere Zeichenfolge handelt. Daher scheint @JamesWesc auf dem richtigen Weg zu sein. Könnte es etwas mit dem Framework zu tun haben? IDK