在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中訪問數組中最後一個對象的屬性

回答

相關問題