如何在 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 中使用多个日期选择器模式?的主要内容,如果未能解决你的问题,请参考以下文章