2017-10-05 1 views
-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 괜찮합니다. 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 기능입니까?

+3

당신은 * 배열의 마지막 항목의'val' 속성에 접근하고 있습니다. 이 프로퍼티의 값은 빈 문자열''''이며, 그것은'things3'에 푸시되는 것입니다. – thanksd

+0

'this.things'는 객체의 배열이고,'l'은'this.things'의 마지막 요소입니다. 그래서'val' 키의 객체입니다. 'l.val'은 빈 문자열을줍니다. 정상인 것처럼 보입니다. 너는 무엇을 기대하고 있니? – Psidom

+0

@thanksd 최고입니다! 마지막 요소가 비어있는 이유는 무엇입니까? 나는 그것을 얻지 못한다 ... – Chikipowpow

답변

0

@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" 
} 

I 출력 "cd"lastFindVal를 얻을 수없는 이유는 확실히 알아낼 수 없습니다,하지만 난 뷰 개발자 아니에요. 당신은 그것이 문자열이라는 것을 볼 수 있으며, 빈 문자열 인 것처럼 보입니다. 따라서 @JamesWesc는 올바른 방향에있는 것 같습니다. 프레임 워크와 관련이 있을까요? IDK

관련 문제