时间戳

首页 > 解决方案 > 如何从 Vue Material DatePicker 获取绑定日期？

javascript - 如何从 Vue Material DatePicker 获取绑定日期？

问题描述

可能是一个基本问题，但我才刚刚开始学习一般的 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 仍然为空。

标签： javascriptvue.jsdatepicker

解决方案

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

推荐阅读