Question

我的codepen是这样的：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。如果我选择一个日期，我希望它调用一个方法

我该怎么办？

Answer 1

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

如果在日期选择器中选择日期，如何调用方法？

1 个答案: