我目前正在嘗試使用 Vue 實作陣列讀取：
{{ this.locations[this.record.carton.LocationID - 1].Location }}
雖然代碼本身在運行時運行良好，但在首次加載時會引發以下錯誤：
app.js:55125 [Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading 'Location')"
app.js:56401 TypeError: Cannot read properties of undefined (reading 'Location')
at Proxy.render (app.js:49569:28)
at VueComponent.Vue._render (app.js:58068:22)
at VueComponent.updateComponent (app.js:58580:21)
at Watcher.get (app.js:58994:25)
at new Watcher (app.js:58983:12)
at mountComponent (app.js:58587:3)
at VueComponent.Vue.$mount (app.js:63593:10)
at VueComponent.Vue.$mount (app.js:66507:16)
at init (app.js:57639:13)
at merged (app.js:57824:5)
我試過像這樣初始化 Location 的值，但它似乎沒有幫助
return {
data() {
return {
locations: {
Location: ''
},
}
}
}
uj5u.com熱心網友回復：
解決的通用方法是設定默認值或守衛或兩者兼而有之。
默認值 - 就像您嘗試過的一樣，除了陣列，并注意索引運算式適用于默認索引...
return {
data() {
return {
locations: [{ Location: '' }],
record: { carton: { LocationID: 1 } }
}
}
}
但這似乎有點做作和脆弱。另一種方法是使用 v-if 來保護標記...
<div v-if="record && record.carton && locations && record.carton.LocationID - 1 < locations.length">
{{ locations[record.carton.LocationID - 1].Location }}
</div>
該運算式涉及到足以保證將其放在 aa 方法中。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/461772.html
標籤：javascript Vue.js
下一篇：如何在v-if陳述句上顯示轉換