How to initialize an array subelement in vue

Question

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: ''
            },
        }
     }
 }

this.locations[this.record.carton.LocationID - 1]?.Location ?? '' — Bravo
– Bravo, Commented Apr 20, 2022 at 22:30

danh · Accepted Answer · 2022-04-20 22:40:58Z

2

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.

answered Apr 20, 2022 at 22:40

danh

62.7k10 gold badges100 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to initialize an array subelement in vue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related