如何从 Vue Material DatePicker 获取绑定日期？答案

【问题标题】：How to get bind date from Vue Material DatePicker?如何从 Vue Material DatePicker 获取绑定日期？
【发布时间】：2020-10-04 15:16:55
【问题描述】：

可能是一个基本问题，但我刚刚开始学习一般的 Vue/Javascript。

我有一个基本的 DatePicker 组件 DatePicker.vue：

<template>
  <div>
    <md-datepicker v-model="selectedDate">
      <label>Select date</label>
    </md-datepicker>
  </div>
</template>

<script>
import Vue from "vue";

export default Vue.extend( {
  name: "LabeledDatepicker",
  data: () => ({
    selectedDate: null,
  }),
});
</script>

这个组件用在这样的视图中：

<template>
   <div class="date-picker">
     <DatePicker />
   </div>
</template>

在我的脚本中，我有两个名为 fromDate 和 toDate 的属性，我想从组件中的两个日期选择器中获取它们。

<script lang="ts">
import Vue from "vue";
import DatePicker from "./DatePicker.vue";
export default Vue.extend({
  components: {
    DatePicker,
  },
  data() {
    return {
      fromDate: null,
      toDate: null,
    };

如何将 datepickers 中选择的值绑定到 fromDate 和 toDate 以便在我的 API 请求中使用它们？我尝试使用 v-model="fromDate"，但即使我选择了日期，fromDate 仍然为空。

【问题讨论】：

标签： javascript vue.js datepicker

【解决方案1】：

如果您想使用现有值填充值并从组件内更新它，您的 datepicker 组件需要接受 props。或者，使用 datepicker 组件中的“emit”，然后附加一个方法来处理更改 custom event in Vue.js

【讨论】：