Vue.js. Data property undefined

Question

I'm trying to access my data property in my Vue.js component. Looks like I'm missing something obvious.

Here is a short version of my code. StoreFilter.vue is a wrapper for matfish2/vue-tables-2.

<template>
    <store-filter :selected.sync="storeIds"></store-filter>
</template>

<script>
    import StoreFilter from './Filters/StoreFilter';

    export default {
        components: {
            StoreFilter
        },
        data() {
            return {
                options : {
                    requestFunction(data) {

                        console.log(this.storeIds); //undefined

                        return axios.get('/api/orders', {
                            params: data
                        }).catch(function (e) {
                            this.dispatch('error', e);
                        }.bind(this));
                    },
                },
                storeIds: [],
            }
        },
        watch     : {
            storeIds(storeIds) {
                this.refreshTable();
            }
        },
        methods   : {
            refreshTable() {
                this.$refs.table.refresh();
            }
        }
    }
</script>

How to get storeIds from requestFunction?

Answer 1

I recommend using the created() way to handle this.

export default {
  // whatever you got here
  data () {
    return {
      options: {}
    }
  },
  created () {
    axios.get('/api/orders', { some: params }).then(response => this.options = response.data)
  }
}

Answer 2

Use a closure, see rewrite below.

data() {
  let dataHolder = {};
  dataHolder.storeIds = [];

  dataHolder.options = {
    requestFunction(data) {

        // closure
        console.log(dataHolder.storeIds); // not undefined

        return axios.get('/api/orders', {
            params: data
        }).catch(function (e) {
            this.dispatch('error', e);
        }.bind(this));
    }
  }

  return dataHolder;
}