vue.js - 如果在日期选择器 vuetify 中选择日期，如何调用方法？

Question

我的代码笔是这样的: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>

如果我点击“调用日期”按钮，它会调用日期选择器。如果我选择一个日期，我希望它调用一个方法

我该怎么做？

Answer 1

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