Question

在带有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的{{1}}函数时会pickerOptions。无论如何都可以访问嵌套函数中的disabledDate吗？

注意：this位于Vue组件中的pickerOptions内。

Answer 1

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

＆＃13;

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()
  },
})

＆＃13;

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

＆＃13;

您应该做的是将disabledDate函数从您的组件的data属性（它被称为＆＃34;数据＆＃34;出于某种原因）移动到{{ 1}}或methods（取决于您将如何使用此功能）。在这种情况下，computed将引用组件实例。

编辑：我看了一下你使用的组件是如何工作的。似乎最好的选择是将this写为pickerOptions属性，该属性返回带有组件参数的对象。然后，您可以将此对象传递给computed属性。

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

2 个答案: