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?

maybe you should put that in methods instead? and if for whatever reason you decide that you need to put it in data use fat arrow function instead i.e. requestFunction: (data) => {} — A. L
– A. L, Commented Mar 31, 2018 at 14:03
@ A. Lau I can't use methods, cause it's a predefined function, but your solution helped. Please, write it as an answer, so I could accept it. — D.R.
– D.R., Commented Mar 31, 2018 at 14:24

user13653 · Accepted Answer · 2018-03-31 14:31:48Z

1

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

answered Mar 31, 2018 at 14:31

user13653

3433 silver badges9 bronze badges

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

Comments

Ru Chern Chong · Accepted Answer · 2018-03-31 18:18:10Z

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

edited Mar 31, 2018 at 18:18

answered Mar 31, 2018 at 14:55

Ru Chern Chong

3,77613 gold badges36 silver badges43 bronze badges

5 Comments

connexo Over a year ago

It'd probably be better to initialize options: null so you can use v-if to check.

Ru Chern Chong Over a year ago

I could also use the Object.keys(options).length > 0 to check. I mean it's really either or here for personal preference. Of course, I am open to find out if null or the Object.keys() method is cleaner and better.

D.R. Over a year ago

Thank you for your answer, but I can't use methods, cause it's a predefined function.

Ru Chern Chong Over a year ago

I am not using method here. I’m using the created () way

D.R. Over a year ago

@RuChernChong Once again. I can't put this function anywhere, but options. And @A.Lau has already solved this problem.

Collectives™ on Stack Overflow

Vue.js. Data property undefined

2 Answers 2

Comments

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Related