在Vue.js中访问数组中最后一个对象的属性

-1

我碰到了一个Vue.js Javascript墙。在Vue.js中访问数组中最后一个对象的属性

这里是我的代码：

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

输出的东西和things2是罚款和预期。东西3和东西4的输出并不如预期。我无法访问数组中对象的“val”键。我不是Javascript对象的专家，但这应该工作，对吧？我错过了什么？我如何访问“val”？

输出：

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

这里是一个演示：https://jsfiddle.net/rcLgmv18/3/

UPDATE：现在很清楚，由于某种原因存在于含{val中的数组的末尾的对象：“” }。如果我这样做（长度 - 2），而不是（长度 - 1），我会得到所需的行为。问题是为什么val =“”最后一个对象很奇怪？它是Vue.js还是Javascript特性？

来源

2017-10-05 Chikipowpow

您*正在*访问阵列最后一项的'val'属性。该属性的值是空字符串'“”'，这就是推到'things3'的东西。 – thanksd

'this.things'是一个对象数组，'l'是'this.things'的最后一个元素，所以它是'val'键的对象。 'l.val'从而给出一个空字符串。看起来很正常。你在期待什么？ – Psidom

@thanksd你是最棒的！为什么最后一个元素是空的？我不明白... – Chikipowpow

我认为@JamesWesc给出了最好的描述。我摆弄了一下，重命名了几个变量的更清楚地说明什么，我认为你是后...

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

这给了我这个输出，当我添加两个“查找”输入框中，输入'ab'在第一个'cd'在第二个。

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

我不能完全弄清楚为什么我不能让lastFindVal输出"cd"，但我不是一个开发商Vue公司。你可以看到它是一个字符串，看起来像是一个空字符串。因此，@JamesWesc似乎走上了正轨。可能它与框架有关？ IDK

来源

2017-10-05 10:54:23

在Vue.js中访问数组中最后一个对象的属性

回答

相关问题