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: ''
},
}
}
}
CodePudding user response:
The general purpose way to solve is to setup either defaults or guards or both.
Defaults - like you tried, except with an array, and taking care that the index expression works out to the defaulted index...
return {
data() {
return {
locations: [{ Location: '' }],
record: { carton: { LocationID: 1 } }
}
}
}
But that seems a little contrived and brittle. The alternative is to guard 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 to warrant placing it in aa method.