同一组件具有不同配置选项的多个实例无法在vue.js中正确呈现

时间:2018-06-27 14:07:14

标签: javascript vue.js components

似乎每次我在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示例,但是由于某种原因它完全忽略了内联配置,因此它没有复制错误。

下面是一个屏幕快照,用于说明我在没有日期配置选项的情况下进行的填充: screenshot of issue

有什么想法会导致这种情况吗?内联配置有问题吗?我不确定怎么做。

1 个答案:

答案 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>