将 "this" 传递给嵌套数据函数 Vuejs

Question

在 Element UI 的 VueJS 组件中，我使用的是 "a function determining if a date is disabled with that date as its parameter".

的 disabledDate

在这种情况下，我可以使用此代码禁用周六和周日。

  pickerOptions: {
    disabledDate (date) {
      if (date.getDay() === 0 || date.getDay() === 6) {
        return true
      }
      return false
    }
  }

我想将 this 传递给 disabledDate 函数，这样我也可以禁用其他日期（带纪元）。

这是我打算做的。

  pickerOptions: {
    firstDayOfWeek: 1,
    disabledDate (date) {
      if (date.getDay() === 0 || date.getDay() === 6) {
        if (this.endDate > this.startDate) {
          return true
        }
      }
      return false
    }
  }

我运行遇到的问题是 this 在传递给 pickerOptions 的 disabledDate 函数时是 undefined。无论如何都可以访问该嵌套函数中的 this 吗？

注意：pickerOptions 在 Vue 组件中位于 data 的内部。

Answer 1

this 永远不会传递给 pickerOptions 的函数，您只是想访问它。你每次都会得到 undefined 因为它是你调用函数时的另一个上下文。这就是你将如何传递它（警告：不要在你的项目中使用这段代码，这只是为了演示）：

new Vue({
  el: '#app',
  data: {
    test: 'test',
    pickerOptions: {
      firstDayOfWeek: 1,
      disabledDate: (date, context) => {
        if (date === null) {
          console.log(context.test);
          return true;
        }
        return false
      },
    },
  },
  mounted() {
    this.pickerOptions.disabledDate(null, this); // alternatevely use call(), .apply() or .bind()
  },
})

<script src="https://unpkg.com/vue"></script>

您应该做的是将 disabledDate 函数从组件的 data 属性移动到 methods 或 computed（取决于您将如何使用此功能）。在这种情况下 this 将引用组件实例。

编辑：我查看了您使用的组件的工作原理。似乎最好的选择是将 pickerOptions 写成 computed 属性，returns 一个带有组件参数的对象。然后你可以将这个对象传递给picker-options 属性.

Answer 2

根据@oniondomes 的建议，我已将 pickerOptions 转换为计算属性并像这样使用它。

最终解决方案

computed: {
  pickerOptions () {
      let startDate = this.start_date
      let options = {}
      options.firstDayOfWeek = 1
      options.disabledDate = function (date) {
        // needs to subtract 1 to enable current day to select
        if (date < startDate.setDate(startDate.getDate() - 1)) {
          return true
        }
        return false
      }
      return options
   }
}

将 "this" 传递给嵌套数据函数 Vuejs

Pass "this" into nested data function Vuejs

javascript

vue.js

element-ui