从自定义v- date -picker Vuetify获取所选日期
提问于 2020-05-02 09:53:41
我在我当前的项目中使用Vue的Vuetify框架，并且我已经创建了一个基于v-date-picker的自定义组件，我计划在多个地方使用它。下面是代码；
子组件(自定义v-date-选择器)
<template>
<v-dialog
ref="dialog"
v-model="modal"
:return-value.sync="date"
persistent
width="290px"
>
<template v-slot:activator="{ on }">
<v-text-field
v-model="date"
:label=title
prepend-icon="event"
readonly
v-on="on"
></v-text-field>
</template>
<v-date-picker v-model="date" scrollable>
<v-spacer></v-spacer>
<v-btn text color="primary" @click="modal = false">Cancel</v-btn>
<v-btn text color="primary" @click="$refs.dialog.save(date)">OK</v-btn>
</v-date-picker>
</v-dialog>
</template>
<script>
export default {
props:[
'title','date'
],
data () {
return {
modal:false,
}
},
}
</script>父组件(这是一个对话框)
<template>
<v-dialog
width="800px"
v-model="dialog"
>
<v-card>
<!-- <v-card-title class="grey darken-2">
Create contact
</v-card-title> -->
<v-container>
<v-row class="mx-2">
<v-col cols="3">
<date-picker-component :date="beginDate" title="Begin Date"></date-picker-component>
</v-col>
<v-col cols="3">
<date-picker-component :date="endDate" title="End Date"></date-picker-component>
</v-col>
</v-row>
</v-container>
<v-card-actions>
<v-spacer />
<v-btn
text
color="primary"
@click="dialog = false"
>Cancel</v-btn>
<v-btn
text
@click="createEvent"
>Create Event</v-btn>
</v-card-actions>
</v-card>
<v-overlay :value="overlay">
<v-progress-circular indeterminate size="64"></v-progress-circular>
</v-overlay>
<v-dialog
v-model="resultDialog"
max-width="290"
>
<v-card>
<v-card-title class="headline"><v-icon class="pr-2" color="green" st>mdi-check-circle</v-icon> Event Manager</v-card-title>
<v-card-text>
{{resultDialogMessage}}
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn
color="green darken-1"
text
@click="resultDialog = false"
>
OK
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-dialog>
</template>
<script>
import Vue from 'vue';
import DatePicker from "../../widgets/DatePicker";
export default {
name: 'CreateEvent',
props:['dialog'],
components:{
'date-picker-component':DatePicker,
},
data () {
return {
resultDialog:false,
resultDialogMessage:"",
overlay:false,
beginDate:new Date().toISOString().substr(0, 10),
endDate:new Date().toISOString().substr(0, 10),
}
},
};
</script>v- date -picker运行良好，但我立即选择了一个日期，在控制台中得到以下错误；
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "date因此，我无法从子组件中获取所选的日期，而该日期只是恢复为初始日期。
是不是我遗漏了什么，我做错了什么？
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-05-02 13:46:31
在向子组件传递vue数据时，应将组件作为道具传递给父组件，并应通过发回来传递该组件。如果您使用相同的变量来传递和传回值，vue会警告您。您需要更改您的日期选择器组件，如下所示，这样prop就不会直接被孩子更改。而是使用本地数据。
<template>
<v-dialog
ref="dialog"
v-model="modal"
:return-value.sync="localDate" //Changed here
persistent
width="290px"
>
<template v-slot:activator="{ on }">
<v-text-field
v-model="localDate" //Changed here
:label=title
prepend-icon="event"
readonly
v-on="on"
></v-text-field>
</template>
<v-date-picker v-model="localDate" scrollable> //Changed here
<v-spacer></v-spacer>
<v-btn text color="primary" @click="modal = false">Cancel</v-btn>
<v-btn text color="primary" @click="$refs.dialog.save(localDate)">OK</v-btn> //Changed here
</v-date-picker>
</v-dialog>
</template>
<script>
export default {
props:[
'title','date'
],
data () {
return {
modal:false,,
localDate: this.date
}
},
watch: {
localDate(){
this.$emit('update', this.localDate)
}
}
}
</script>现在，在您的父组件中，您可以按如下方式使用
<date-picker-component
:date="endDate"
@update="(v) => (endDate = v)"
title="End Date">
</date-picker-component>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61557429
复制相关文章
腾讯云开发者
