0

在带有Element UI的VueJS 组件中，我使用 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是undefined当它被传递到pickerOptions'disabledDate函数时。无论如何可以访问this该嵌套函数内部吗？

注意：pickerOptions在dataVue 组件中。

4

2 回答 2

2

this永远不会被传递给pickerOptions's 函数，你只是想访问它。您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属性，该属性返回一个带有组件参数的对象。然后您可以将此对象传递给picker-options属性。

于 2018-02-19T09:06:40.280 回答
0

根据@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
   }
}
于 2018-02-19T11:12:52.523 回答