javascript - 组件中的数据对象未定义

Question

我在 vue 组件的数据中定义了对象，如下所示:

export default {
  components: {..}
  data: () => {
    filter: ({
      from: 2017,
      to: 2018
    }
  }),
  computed: mapState({
    fooObjects: (state) => {
      console.log(this.filter) // print undefined
    }
  }),
  ...
}

你能告诉我如何访问计算属性中的过滤器对象以及为什么过滤器未定义吗？正如你所看到的，我在开始时已经初始化了 2 年。谢谢。

Answer 1

不要在计算上使用箭头函数，它们绑定(bind)到父上下文，这不会是您期望的 Vue 实例。您还应该从数据方法返回一个对象。这在下面工作

export default {
  components: {..},
  data () {
    return {
      filter: {
        from: 2017,
        to: 2018
      }
    }
  },
  computed: {
    fooObjects: function () {
      return console.log(this.filter)
    }
  }
}