Vue中Methods无法访问响应式值：Reactive value为undefined

我来帮你搞定这个问题！你遇到的this.dataCategory返回undefined的情况，核心是Vue实例初始化的顺序踩坑了。

问题根源 #

当Vue创建实例时，会先执行data()函数来初始化数据，但这时候实例还没完成挂载，data里的属性（比如dataCategory）还没被绑定到this对象上。你在data()里直接调用this.filtered()，这时候this.dataCategory根本还没初始化，自然会返回undefined。

解决方案 #

根据你的使用场景，有两种靠谱的解决方式：

方式1：用created钩子初始化filterAll

如果filterAll只需要在实例创建时初始化一次，依赖dataCategory的初始值，那把初始化逻辑移到created钩子函数里就行——这个钩子触发时，data里的所有属性都已经挂载到this上了：

new Vue({
  el: "#app",
  data() {
    return {
      filterAll: null, // 先初始化为null占位
      dataCategory: ["data"]
    };
  },
  created() {
    // 实例创建完成后，再调用方法初始化filterAll
    this.filterAll = this.filtered();
  },
  methods: {
    filtered() {
      console.log("this.data", this.dataCategory); // 现在能正常拿到["data"]了
      // 这里写你的过滤逻辑，返回对应的值给filterAll
    },
    callfilteredproducts() {
      // 你的其他方法逻辑
    }
  }
});

方式2：改用计算属性（更推荐）

如果filterAll需要跟着dataCategory的变化自动更新，那直接把filterAll改成计算属性（computed）更符合Vue的响应式设计，它会自动监听依赖的变化并重新计算：

new Vue({
  el: "#app",
  data() {
    return {
      dataCategory: ["data"]
    };
  },
  computed: {
    filterAll() {
      console.log("this.data", this.dataCategory);
      // 这里写你的过滤逻辑，返回计算后的结果
    }
  },
  methods: {
    callfilteredproducts() {
      // 你的其他方法逻辑
    }
  }
});

额外提醒 #

以后写Vue代码时要注意实例的生命周期顺序：data()执行早于created，在data()里不要调用依赖其他data属性的方法，否则很容易出现undefined的问题。

内容的提问来源于stack exchange，提问作者Harsh Patel