javascript - 如何将日期点击添加到 Vuetify 日历

Question

我正在尝试基于以下存储库构建 Vuetify 日历:https://github.com/jsfanatik/vuestacks-calendar-vue-firebase 。我的目标是使用户能够通过直接单击日历中的日期来添加新的日历事件，而不是仅仅单击用户界面顶部的新事件按钮。为了实现此目的，我将 @click:date="viewDay 更改为 @click:date="dialogDate = true"，以便单击日期即可打开新的日期事件输入对话框(见下面的对话框代码)，我想修改这个新的对话框，让点击的日期的开始和结束时间(大概是中午12点到12点)自动传入这个对话框，并绑定(bind)到开始和结束时间用户单击给定日期后立即结束字段。关于如何实现此目的有什么建议吗？

对话框 - 点击日期

      <v-dialog v-model="dialogDate" max-width="500">
        <v-card>
          <v-container>
            <v-form @submit.prevent="addEvent">
              <v-text-field v-model="name" type="text" label="event name (required)"></v-text-field>
              <v-text-field v-model="details" type="text" label="detail"></v-text-field>
              <v-text-field v-model="start" type="date" label="start (required)"></v-text-field>
              <v-text-field v-model="end" type="date" label="end (required)"></v-text-field>
              <v-text-field v-model="color" type="color" label="color (click to open color menu)"></v-text-field>
              <v-btn type="submit" color="primary" class="mr-4" @click.stop="dialog = false">
                create event
              </v-btn>
            </v-form>
          </v-container>
        </v-card>
      </v-dialog>

Answer 1

如果我误解了您的问题，我深表歉意，但我认为您可能想通过以下方法传递日期:

而不是

@click:date="dialogDate = true"

做类似的事情

@click:date="setDialogDate(date)"

然后有一个名为 setDialogDate 的方法，该方法会传入用户单击的特定日期。然后您可以在该方法中打开和关闭对话框。