Vue.js。数据属性未定义

Posted 2023-02-23

【中文标题】Vue.js。数据属性未定义

【英文标题】：Vue.js. Data property undefined

【发布时间】：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，但您的解决方案有所帮助。请把它写成答案，这样我就可以接受了。

【参考方案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 已经解决了这个问题。