Vue.js "cannot read property 'undefined' of undefined" when accessing array of objects using Vue variable as index

Question

Having a small problem when accessing Vue data from within the data(), originally I was getting a few errors saying that variables were undefined but I realised pretty quickly that it was because of the order I defined them in, so I changed the order so that it wouldn't be a problem anymore but I'm still getting a cannot read property 'undefined' of undefined when trying to access an array of objects defined above whilst using a Vue variable as the index.

App.vue

export default {
data(){
  return {
    correct: 0,
    total: 0,
    currentText: 0,
    position: 0,
    userText: '',
    texts: [{
        text: 'the quick brown fox jumped over the lazy dog',
        textSize: '50px'
      },{
        text: 'sphinx of black quartz judge my vow',
        textSize: '50px'
      }
    ],
    textSize: this.texts[this.currentText].textSize
  }
}

The value of this is not what you think it is. You cannot refer to an "under construction" object from inside the object initializer. You'll have to set up the textSize property outside the initializer in a separate statement. Or it may be that textSize should really be method, so that it can dynamically return the size of the current text. — Pointy
– Pointy, Commented Sep 7, 2021 at 12:41
@Pointy would creating a method that accesses this.texts[this.currentTexts].textSize circumvent the error? — Darcy Power
– Darcy Power, Commented Sep 7, 2021 at 12:45
Yes. If textSize() were a method, then when called (if called properly, as a method of the returned object) then it would be able to use this. — Pointy
– Pointy, Commented Sep 7, 2021 at 12:48
this points to a different object. you can try putting it in a computed hook instead — Karma Blackshaw
– Karma Blackshaw, Commented Sep 7, 2021 at 12:48
@Pointy how would i go about calling the method as a method of the returned object because just defining getTextSize(){ return this.texts[this.currentText].textSize } as a vue method isn't working. — Darcy Power
– Darcy Power, Commented Sep 7, 2021 at 12:55

Matt U · Accepted Answer · 2021-09-07 13:03:36Z

2

As suggested in the comments, use a computed:

export default {
  data() {
    return {
        // Stuff
    }
  },
  computed: {
    textSize: function() {
      return this.texts[this.currentText].textSize
    }
  }
}

This way you can still access textSize in your template like you would access any data property, for example. A computed essentially caches the value, so each time you access it, the computed will only run if the value changes. A method, on the other hand, will be executed every time it's requested because a method doesn't know if a value has changed.

answered Sep 7, 2021 at 13:03

Matt U

5,12811 silver badges28 bronze badges

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

Comments

n0th1ng · Accepted Answer · 2021-09-07 13:03:39Z

2

Define textSize as a computed property.

export default {
  data() {
    return {
      correct: 0,
      total: 0,
      currentText: 0,
      position: 0,
      userText: '',
      texts: [
        {
          text: 'the quick brown fox jumped over the lazy dog',
          textSize: '50px'
        },
        {
          text: 'sphinx of black quartz judge my vow',
          textSize: '50px'
        }
      ],
    },
    computed: {
      textSize() {
        return this.texts[this.currentText].textSize
      }
    }
  },
}

answered Sep 7, 2021 at 13:03

n0th1ng

212 bronze badges

3 Comments

Pointy Over a year ago

This is probably the idiomatic "Vue" way of doing things.

n0th1ng Over a year ago

But is has some advantages like computed caching. You can read about it in official docs link

Pointy Over a year ago

Yes, I meant that as a compliment to the solution, as opposed to mine; I don't know much about Vue.

Pointy · Accepted Answer · 2021-09-07 13:05:05Z

1

One thing you could do is make textSize a getter method:

export default {
  data() {
    const object = {
      correct: 0,
      total: 0,
      currentText: 0,
      position: 0,
      userText: '',
      texts: [{
        text: 'the quick brown fox jumped over the lazy dog',
        textSize: '50px'
      }, {
        text: 'sphinx of black quartz judge my vow',
        textSize: '50px'
      }],
    };
    Object.defineProperty(object, "textSize", {
      get: function() {
        return object.texts[object.currentText].textSize;
      }
    });
    return object;
  }
}

answered Sep 7, 2021 at 13:05

Pointy

415k62 gold badges600 silver badges631 bronze badges

Collectives™ on Stack Overflow

Vue.js "cannot read property 'undefined' of undefined" when accessing array of objects using Vue variable as index

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related