时间戳

首页 > 解决方案 > 在其他变量的函数中访问数据的变量 - 未定义

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

问题描述

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

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

模板：

<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应该可以工作。

我会征求任何建议:)

标签： javascripthtmlasp.netvue.jselement-ui

解决方案

该方法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;
    }
  }
})

推荐阅读