Data object in component is undefined

Question

I have defined object in data of vue component like this:

export default {
  components: {..}
  data: () => {
    filter: ({
      from: 2017,
      to: 2018
    }
  }),
  computed: mapState({
    fooObjects: (state) => {
      console.log(this.filter) // print undefined
    }
  }),
  ...
}

Can you tell me how to access to my filter object in computed property and why is filter undefined? I've initialize it with 2 years on start as you can see. Thanks.

Answer 1

Don't use arrow functions on computed, they are bound to the parent context, this will not be the Vue instance as you'd expect. Also you should return an object from your data method. This is working below

 export default { components: {..}, data () { return { filter: { from: 2017, to: 2018 } } }, computed: { fooObjects: function () { return console.log(this.filter) } } } 

Answer 2

A couple of things. First your parenthesis do not line up starting at line 4 . Second, in order to access this.filter your data method must return a json object. You have it returning the filter.

The following code should give you access to this.filter .

export default {
  components: {..}
  data: () => {
    return {
      filter: {
        from: 2017,
        to: 2018
      }
    }
  },
  computed: mapState({
    fooObjects: (state) => {
      console.log(this.filter) // print undefined
    }
  }),
  ...
}