Accéder aux attributs du dernier objet dans le tableau dans Vue.js

Question

J'ai touché un mur Javascript de Vue.js.

Voici mon 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"]); 
    } 
    } 
}); 

sortie pour les choses et things2 est très bien et comme prévu. La sortie pour things3 et things4 n'est pas conforme aux attentes. Je ne peux pas accéder à la clé "val" des objets dans un tableau. Je ne suis pas un expert sur les objets Javascript, mais cela devrait fonctionner, non? Qu'est-ce que je rate? Comment accéder à "val"?

Sortie:

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

Voici une démo: https://jsfiddle.net/rcLgmv18/3/

MISE À JOUR: Il est clair maintenant que pour une raison quelconque il y a un objet à la fin du tableau avec {val: « » } J'obtiens le comportement désiré si je le fais (longueur - 2), au lieu de (longueur - 1). La question est pourquoi le dernier objet est-il bizarre avec val = ""? Est-ce un Vue.js ou une fonctionnalité Javascript?

Answer 1

Je pense que @JamesWesc a donné la meilleure description. J'ai bidouillé un peu, renommer deux des variables à décrire plus clairement ce que je pense que vous êtes après ...

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; 
    } 
    } 
}); 

Ce qui me donne cette sortie quand j'ajoute deux « trouve » boîtes d'entrée, entrez 'ab' dans le premier et 'cd' dans le second.

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

Je ne peux pas tout à fait comprendre pourquoi je ne peux pas obtenir lastFindVal à la sortie "cd", mais je ne suis pas un développeur Vue. Vous pouvez voir que c'est une chaîne, et semble être une chaîne vide. Par conséquent, @ James Wesc semble être sur la bonne voie. Cela a-t-il quelque chose à voir avec le cadre? IDK