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

Question

我需要根据 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 应该可以工作。

我会征求任何建议:)

Answer 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;
    }
  }
})

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

Access data's variable in other variable's function - undefined

javascript

html

asp.net

vue.js

element-ui