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 괜찮합니다. things3 및 things4에 대한 결과가 예상과 다를 수 있습니다. 배열의 객체 중 "val"키에 액세스 할 수 없습니다. 나는 자바 스크립트 객체에 대한 전문가는 아니지만, 제대로 작동 할 것입니다. 내가 뭘 놓치고 있니? "val"에 액세스하려면 어떻게해야합니까?
출력 : https://jsfiddle.net/rcLgmv18/3/
업데이트 : 여기
{ "things": [ { "val": "first" }, { "val": "second" }, { "val": "" } ], "things2": [ { "val": "first" }, { "val": "second" }, { "val": "" } ], "things3": [ "", "", "" ] }
데모입니다 그것은 지금 분명하다 {발과 배열의 끝에 객체가 어떤 이유로 : "" }. 내가 (길이 - 2), (길이 - 1) 대신 원하는 동작을 얻을. 질문은 val = ""인 마지막 객체 종류가 이상한 이유는 무엇입니까? Vue.js 또는 Javascript 기능입니까?
당신은 * 배열의 마지막 항목의'val' 속성에 접근하고 있습니다. 이 프로퍼티의 값은 빈 문자열''''이며, 그것은'things3'에 푸시되는 것입니다. – thanksd
'this.things'는 객체의 배열이고,'l'은'this.things'의 마지막 요소입니다. 그래서'val' 키의 객체입니다. 'l.val'은 빈 문자열을줍니다. 정상인 것처럼 보입니다. 너는 무엇을 기대하고 있니? – Psidom
@thanksd 최고입니다! 마지막 요소가 비어있는 이유는 무엇입니까? 나는 그것을 얻지 못한다 ... – Chikipowpow