似乎每次我在Vue应用程序中增加一层复杂性时,我都会感到有些困惑。
我正在使用vue-flatpickr日期/时间选择器组件。我在同一页面上使用了两个日期选择器和四个时间选择器。最初,这很好。我当时使用默认配置作为日期选择器,而使用自定义配置进行时间选择器。当我需要配置日期选择器的dateFormat
时出现问题。
突然之间,时间选择器现在变成了日期选择器!奇怪的是,他们实际上忽略了datepicker config选项-因此,并不是他们在进行内联配置,这更像是他们不再连接到正确的v-model
。
来自我的<template>
:
<div class="form-group row">
<label>Date</label>
<flat-pickr v-model="date"
:config="{dateFormat: 'l, F j'}"
class="form-control"
placeholder="Select date"
name="date"></flat-pickr>
</div>
<div class="row">
<div class="form-group col left">
<label>Time</label>
<flat-pickr v-model="time"
:config="config"
class="form-control"
placeholder="Select time"
name="time1"></flat-pickr>
</div>
</div>
来自我的<script>
:
export default {
name: 'Contact',
components: {
VueSimpleSuggest,
VueGoogleAutocomplete,
flatPickr
},
data(flatPickr) {
return {
date: null
}
},
data(flatPickr) {
return {
time: null,
config: {
enableTime: true,
noCalendar: true,
dateFormat: "H:i",
time_24hr: true
}
}
}
}
我打算添加一个codesandbox示例,但是由于某种原因它完全忽略了内联配置,因此它没有复制错误。
下面是一个屏幕快照,用于说明我在没有日期配置选项的情况下进行的填充:
有什么想法会导致这种情况吗?内联配置有问题吗?我不确定怎么做。
答案 0 :(得分:1)
为什么您具有多个data ()
属性?您是否尝试过:
export default {
name: 'Contact',
components: {
VueSimpleSuggest,
VueGoogleAutocomplete,
flatPickr
},
data() {
return {
date: null,
time: null,
dateConfig: {
altInput: true,
altFormat: "l, F j",
dateFormat: "Y-m-d"
},
timeConfig: {
enableTime: true,
noCalendar: true,
dateFormat: "H:i",
time_24hr: true
}
}
}
}
然后更改此部分:
<flat-pickr v-model="date"
:config="dateConfig"
class="form-control"
placeholder="Select date"
name="date"></flat-pickr>
...
<flat-pickr v-model="time"
:config="timeConfig"
class="form-control"
placeholder="Select time"
name="time1"></flat-pickr>