Vue.js。数据属性未定义答案

【问题标题】：Vue.js. Data property undefinedVue.js。数据属性未定义
【发布时间】：2018-09-10 07:54:09
【问题描述】：

我正在尝试访问我的 Vue.js 组件中的数据属性。看起来我遗漏了一些明显的东西。

这是我的代码的简短版本。 StoreFilter.vue 是 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>

如何从requestFunction获取storeIds？

【问题讨论】：

也许你应该把它放在methods 中？如果出于某种原因您决定需要将其放入 data 中，请改用粗箭头函数，即 requestFunction: (data) => {}
@A. Lau 我不能使用methods，因为它是predefined function，但您的解决方案有所帮助。请把它写成答案，这样我就可以接受了。

标签： javascript laravel vue.js vuejs2 vue-component

【解决方案1】：

使用闭包，参见下面的重写。

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

【讨论】：

【解决方案2】：

我建议使用created() 的方式来处理这个问题。

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

【讨论】：

最好初始化options: null，这样你就可以使用v-if来检查了。
我也可以使用Object.keys(options).length > 0 来检查。我的意思是它真的是或者这里是出于个人喜好。当然，我很乐意了解null 或Object.keys() 方法是否更清洁更好。
感谢您的回答，但我无法使用方法，因为它是predefined function。
我这里没有使用方法。我正在使用created ()方式
@RuChernChong 再次。我不能把这个函数放在任何地方，但是options。而@A.Lau 已经解决了这个问题。