CODEWITHSUNDEEP
javascriptvuejs2
netik
netik

Reputation: 1826

VueJS computed data and scopes

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?

Upvotes: 0

Views: 249

Answers (1)

thanksd
thanksd

Reputation: 55644

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
    }
  }
}

Upvotes: 2

Related Questions