如果在 datepicker vuetify 中选择日期，我该如何调用方法？

Posted 2023-02-22

【中文标题】如果在 datepicker vuetify 中选择日期，我该如何调用方法？

【英文标题】：How can I call a method if select date in the datepicker vuetify?

【发布时间】：2020-02-08 18:04:47

【问题描述】：

我的代码笔是这样的：https://codepen.io/positivethinking639/pen/mddejJN

我的代码是这样的：

<div id="app">
  <v-app>
    <v-content>
    <v-container>
      <v-dialog
        ref="dialogTest"
        v-model="modalTest"
        :return-value.sync="dateTest"
        persistent
      >
        <template v-slot:activator=" on ">
          <v-btn color="success" dark v-on="on">call date</v-btn>
        </template>
        <div class="text-center title">Select a Date & Time</div>
        <v-row justify="center">
        <v-date-picker v-model="dateTest" scrollable :allowed-dates="allowedDates">
          <div class="flex-grow-1"></div>
          <v-btn text color="primary" @click="modalTest = false">Cancel</v-btn>
          <v-btn text color="primary" @click="saveData">OK</v-btn>

        </v-date-picker>
        <v-slide-y-transition>
            <v-col cols=2 v-show="dateTest !== null">
              <template v-for="allowedTime in allowedTimes">
                <v-btn
                  @click="setTime(allowedTime)"
                  class="my-2"
                  :outlined="allowedTime !== time"
                  block
                  x-large
                  color="primary"
                > allowedTime </v-btn>
              </template>
            </v-col>
          </v-slide-y-transition>
          </row>
      </v-dialog>

    dateTest
  </v-container>
  </v-content>
  </v-app>
</div>

如果我单击“调用日期”按钮，它将调用 datepicker。如果我选择一个日期，我希望它调用一个方法

我该怎么做？

【参考方案1】：

您可以在v-date-picker 上使用@change="myMethod" 或@click:date="myMethod"。 阅读 vuetify date-picker documentation（事件部分）了解更多信息。

【讨论】：

需要一行代码，而不是方法