Vue.js组件中访问data属性storeIds显示undefined问题求助

嘿，我来帮你排查这个问题！你遇到的this.storeIds返回undefined，主要有两个核心原因，咱们一步步解决：

1. 普通函数的this指向错误 #

你在options里用普通函数声明requestFunction时，这个函数内部的this并不指向Vue组件实例，而是指向options这个对象本身——而storeIds是Vue实例的data属性，不在options里，所以自然访问不到。

修复方案（两种任选） #

方案A：改用箭头函数（最简洁）

箭头函数不会绑定自己的this，它会继承外层作用域的this（也就是Vue组件实例），直接修改函数声明即可：

<template> 
  <store-filter :selected.sync="storeIds"></store-filter> 
</template> 
<script> 
import StoreFilter from './Filters/StoreFilter'; 
export default { 
  components: { StoreFilter }, 
  data() { 
    return { 
      storeIds: [], // 别忘了补这个！后面会说原因
      options : { 
        requestFunction: (data) => { // 改成箭头函数
          console.log(this.storeIds); // 现在能正确拿到值了
        } 
      } 
    } 
  } 
} 
</script>

方案B：提前保存Vue实例的this

如果因为某些场景不能用箭头函数（比如需要访问options自身的属性），可以在data()里先把Vue实例的this存成变量，再在函数里用这个变量访问：

<template> 
  <store-filter :selected.sync="storeIds"></store-filter> 
</template> 
<script> 
import StoreFilter from './Filters/StoreFilter'; 
export default { 
  components: { StoreFilter }, 
  data() { 
    const vm = this; // 保存Vue实例的引用
    return { 
      storeIds: [],
      options : { 
        requestFunction(data) { 
          console.log(vm.storeIds); // 通过vm访问Vue实例的属性
        } 
      } 
    } 
  } 
} 
</script>

2. 别忘了在data里声明storeIds！ #

看你的模板里用了:selected.sync="storeIds"，但原代码的data()返回对象里根本没有storeIds这个属性！Vue的响应式属性必须在data里声明，否则不仅无法被追踪，直接访问也会是undefined。所以一定要把storeIds加到data的返回对象里，给个初始值（比如空数组[]）。

这样调整之后，你就能正常访问storeIds啦！

内容的提问来源于stack exchange，提问作者D.R.