如何在 vuetify 中使用多个日期选择器模式?

Posted

技术标签:

【中文标题】如何在 vuetify 中使用多个日期选择器模式?【英文标题】:How can I multiple datepicker modal in vuetify? 【发布时间】:2020-02-06 12:45:07 【问题描述】:

我的 vue 组件是这样的:

<template>
  <v-row>
    <v-col cols="12" sm="6" md="4">
      <v-dialog
        v-for="(item, i) in test" :key="i"
        ref="dialog"
        v-model="modal"
        :return-value.sync="item.date"
        persistent
        
      >
        <template v-slot:activator=" on ">
          <v-text-field
            v-model="item.date"
            label="Picker in dialog"
            prepend-icon="event"
            readonly
            v-on="on"
          ></v-text-field>
        </template>
        <v-date-picker v-model="date" scrollable>
          <div class="flex-grow-1"></div>
          <v-btn text color="primary" @click="modal = false">Cancel</v-btn>
          <v-btn text color="primary" @click="$refs.dialog.save(item.date)">OK</v-btn>
        </v-date-picker>
      </v-dialog>
    </v-col>
  </v-row>
</template>

<script>
  export default 
    data: () => (
      test: [
         id: 1, date: new Date().toISOString().substr(0, 10) ,
         id: 2, date: new Date().toISOString().substr(0, 10) ,
      ],
      modal: false,
    ),
  
</script>

多个日期时间选择器无法正常工作

如果我在模态中单击“确定”按钮,则会出现这样的错误:

[Vue 警告]:v-on 处理程序出错:“TypeError: _vm.$refs.dialog.save 不是函数”

我该如何解决这个问题?

【问题讨论】:

【参考方案1】:

首先,您需要从对话框中返回整个对象,而不仅仅是日期。使用:return-value.sync="item.date"test 中的对象将只有date 作为其唯一属性。您的日期选择器也有错误的绑定。

  <v-dialog
    v-for="(item, i) in test" :key="i"
    ref="dialog"
    v-model="modal"
    :return-value.sync="item"
    persistent
    
  >
    <template v-slot:activator=" on ">
      <v-text-field
        v-model="item.date"
        label="Picker in dialog"
        prepend-icon="event"
        readonly
        v-on="on"
      ></v-text-field>
    </template>
    <v-date-picker v-model="item.date" scrollable>
      <div class="flex-grow-1"></div>
      <v-btn text color="primary" @click="modal = false">OK</v-btn>
    </v-date-picker>
  </v-dialog>

【讨论】:

存在错误:vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in callback for watcher "function () return this._data.$$state ": "Error: [vuex] do not mutate vuex store state outside mutation handlers."

以上是关于如何在 vuetify 中使用多个日期选择器模式?的主要内容,如果未能解决你的问题,请参考以下文章

如果我在 vuetify 的日期选择器中单击下个月的图标,如何添加按钮单击以调用方法?

如何在 vuetify 中自定义日期选择器?

单击vuetify中的按钮时如何显示日期选择器?

Vuetify 需要日期选择器并且不允许文本输入

nuxt 上的 Vuetify 日期选择器问题

如何使用引导模式更新引导日期时间选择器中的默认日期