在其他变量的函数中访问数据的变量 - 未定义答案

【问题标题】：Access data's variable in other variable's function - undefined在其他变量的函数中访问数据的变量 - 未定义
【发布时间】：2020-01-17 13:44:00
【问题描述】：

我需要根据 Vue 模型在 Vue 中进行日期验证。

问题在于这个日期验证是如何工作的。我需要在包含disabledDate 函数的data 段中定义变量。所以这里是简化的代码：

模板：

<el-date-picker type="date"
  v-model="date1"
  :picker-options="datePickerOptions1">
</el-date-picker>

JS：

data() {
  return {
    date: null,
    rev: {
      validDate: null
    },
    datePickerOptions1: {
      disabledDate(date) {
        return date < this.rev.validDate;
      }
    }
  }
},
mounted: function() {
  var today = new Date();
  this.rev.validDate = today.getDate();
}

控制台显示this.rev.validDate 是undefined。

在我的情况下，this.rev.validDate 是在安装组件时从数据库中获取的，并且取决于此 el-date-picker 应该可以工作。

我会征求任何建议:)

【问题讨论】：

标签： javascript html asp.net vue.js element-ui

【解决方案1】：

disabledDate 方法被深度嵌套到它丢失当前 Vue 实例的位置（否则可以通过 this 上下文访问）。要解决此问题，您可以将实例分配给一个变量，如下所示：

data() {
  const vm = this;

  return {
    date: null,
    rev: {
      validDate: null
    },
    datePickerOptions1: {
      disabledDate(date) {
        return date < vm.rev.validDate;
      }
    }
  }
}

或带箭头功能：

data: vm => ({
  date: null,
  rev: {
    validDate: null
  },
  datePickerOptions1: {
    disabledDate(date) {
      return date < vm.rev.validDate;
    }
  }
})

【讨论】：