2

我正在使用 vue.js / vuetify 2 创建一个表单，其中一个字段是日期事件，所以我使用 v-date-picker 让用户选择日期。问题如下：

  • 日期选择器菜单打开，但无法选择日期。如果单击了任何日期，则不会更新菜单。可以更改月份和年份 (UI)，但仍不会更新。

  • 对于上述问题，文本字段仍然为空。

我尝试将 vuetify 从版本 1.5 更新到最新版本 2，问题仍然存在。我正在使用 date-fns 来格式化日期，所以我尝试将 v-text-field = "formattedDate" 的值更改为 v-text-field = "date"

热重新加载后（不是刷新，F5，页面自身热加载），日期出现在表单中，但仍然无法在菜单中更改日期（单击其他日期没有任何作用）。

<template>
<v-app>
  <v-content>
    <v-layout wrap row mt-2 align-center justify-center>
    <v-card width="1050px" height= "690px">
      <v-card-title class="display-1 font-weight-medium ">Post-Event Form:</v-card-title>
  <v-form>
    <v-container>
      <v-layout row wrap>
          <v-flex md4>
          <v-text-field v-model="event" prepend-icon="event" label="Event Name" required></v-text-field>
        </v-flex>
      <v-flex md3>
          <v-menu>
            <v-text-field :value="formattedDate" slot="activator" label="Date of event" prepend-icon="date_range"></v-text-field>
            <v-date-picker v-model="date"></v-date-picker>
        </v-menu>

        </v-container>
       </v-flex>
     </v-form>
   </v-content>

</v-app>
</template>

<script>
import format from 'date-fns/format'

export default{
  data() {
    return {
      evenum: int,
      event: '',
      // date: '',
      date: new Date().toISOString().substr(0, 10),
      menu1: true,
      menu2: true,
  }
},
computed: {
    formattedDate() {
     return this.date ? format(this.date, 'do MMM YYYY') : ''
    },
},
}

</script>

我希望有一个功能性的 v-date-picker，一个可以与之交互的菜单（单击/选择日期），然后更新文本字段并显示更新的日期。

实际结果是菜单打开但无法选择日期，并且在文本字段中看不到更新。

4

2 回答 2

3

尝试这个：

<template>
<v-menu
    v-model="showPicker"
    :close-on-content-click="false"
    transition="scale-transition"
    offset-y
    full-width
    max-width="290px"
    min-width="290px"
>
    <template v-slot:activator="{ on }">
        <v-text-field
            v-model="selectedDate"
            label="Choose the date"
            hint="YYYY/MM/DD"
            persistent-hint
            readonly
            v-on="on"
        ></v-text-field>
    </template>
    <v-date-picker
        v-model="selectedDate"
        no-title
        @input="showPicker = false"
    ></v-date-picker>
</v-menu>
</template>

<script>
export default {
    data: () => ({
        showPicker: false,
        selectedDate: null,
    })
</script>

它是从我的代码中提取的，正如我们所说的那样。

工作示例：Codepen

于 2019-08-28T16:34:38.060 回答
1

试试这个：你可以使用 v-model 代替 :value

<div id="app">
   <v-app id="inspire">
      <v-container>
         <v-row>
            <v-col cols=12 md="4">
               <v-menu
                  v-model="showPicker"
                  :close-on-content-click="false"
                  :nudge-right="40"
                  transition="scale-transition"
                  offset-y
                  min-width="290px"
                  max-width="290px"
                  >
                  <template v-slot:activator="{ on }">
                     <v-text-field
                        v-model="selectedDate"
                        label="date"
                        prepend-icon="mdi-calendar-range"
                        readonly
                        v-on="on"
                     ></v-text-field>
                 </template>
                 <v-date-picker v-model="date" @input="closeDateMenu"></v- date-picker>
              </v-menu>
           </v-col>
        </v-row>
     </v-container>
   </v-app>
</div>

new Vue({
   el: '#app',
   vuetify: new Vuetify(),
   data: () => ({
     showPicker: false,
     selectedDate: null,
     date:null,
   }),
   methods:{
    closeDateMenu (){
      this.showPicker = false;
      this.selectedDate= this.date ? moment(this.date).format('dddd, MMMM Do YYYY') : '';
    },
  }
})

工作示例：Codepen

于 2020-04-08T10:59:00.887 回答