I am currently trying to implement an array read using Vue:
{{ this.locations[this.record.carton.LocationID - 1].Location }}
While the code itself works fine during run time, it throws the following error when its first loaded:
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)
I've tried initializing the value of Location like so, but it doesn't seem to help
return {
data() {
return {
locations: {
Location: ''
},
}
}
}
The general way to solve is to set defaults or guards or both.
Defaults: As you tried, except with an array, and taking care that the index expression works with the default index...
return { data() { return { locations: [{ Location: '' }], record: { carton: { LocationID: 1 } } } } }But that seems a bit artificial and fragile. The alternative is to protect the markup with v-if...
<div v-if="record && record.carton && locations && record.carton.LocationID - 1 < locations.length"> {{ locations[record.carton.LocationID - 1].Location }} </div>That expression is involved enough that it warrants putting it in a method.