VueJS computed data and scopes

Question

I'm trying to create an array elections as a computed property within my vuejs component, by adding some more UI relevant information to the array elections of my datastore.

export default {
    computed: {
        data() {
           var elections = [];
           this.$dataStore.state.elections.forEach((el) => {
               console.log(this);
               var election = { id:el.id, icon: 'assignment', iconClass: 'blue white--text', title: el.title, subtitle: 'Jan 20, 2018' };
               this.elections.push(election);
           }); 

           return {
              elections: this.elections
           }
       }
    }
}

However, I'm getting a "Cannot read property 'push' of undefined"" error. What is wrong here?

thanksd · Accepted Answer · 2017-10-06 14:58:19Z

2

Referencing this.elections before the data method has returned won't work because the Vue instance's data properties haven't been set yet.

But you don't need to reference this.elections for what you're trying to do. Just reference the elections array that you initialized before the forEach.

Also, you have your data method in the computed object, but it should be outside of it.

Also, as @Bert mentioned in the comments, you probably meant push instead of put when adding to the array.

Here's what it should look like:

export default {
  data() {
    var elections = [];
    this.$dataStore.state.elections.forEach((el) => {
      var election = { id:el.id, icon: 'assignment', iconClass: 'blue white--text', title: el.title, subtitle: 'Jan 20, 2018' };
      elections.push(election);
    }); 

    return {
      elections: elections
    }
  }
}

edited Oct 6, 2017 at 14:58

answered Oct 6, 2017 at 14:52

thanksd

55.8k23 gold badges167 silver badges155 bronze badges

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

1 Comment

netik Over a year ago

Thank you! Ahh yeah and it should be push, sorry for that!

Collectives™ on Stack Overflow

VueJS computed data and scopes

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related