具有不同配置选项的同一组件的多个实例在vue.js中没有正确呈现
具有不同配置选项的同一组件的多个实例在vue.js中没有正确呈现
提问于 2018-06-27 14:07:14
似乎每次我给我的Vue应用程序增加一层复杂性时，我都会破坏一些东西。
我正在使用vue-比例器日期/时间选择器组件。我在同一个页面上使用了两个数据编辑器和四个时间选择器；最初，它工作得很好。我是使用默认配置的数据启动器，和自定义配置来制作时间选择器。当我需要配置数据启动器的dateFormat时，出现了这个问题。
突然间，时间选择器变成了数据采集器！奇怪的是，他们实际上忽略了datepicker选项--这并不是因为他们正在进行内联配置，而是因为他们不再连接到正确的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
}
}
}
}我本来打算添加一个代码框示例，但由于某些原因，它完全忽略了内联配置，因此它没有复制错误。
这里有一个屏幕截图来说明我所指的在没有日期配置选项的情况下填充的内容：
有什么原因吗？这是内联配置的问题吗？我不知道怎么换个方法。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-27 14:29:28
为什么您有多个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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51064935
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号