Несколько экземпляров одного и того же компонента с разными параметрами конфигурации неправильно отображаются в vue.js

Question

Кажется, каждый раз, когда я добавляю слой сложности в свое приложение Vue, я что-то ломаю

Я использую компонент выбора даты / времени vue-flatpickr. Я использую два указателя даты и четыре указателя времени на одной странице; изначально это работало просто отлично. Я использовал конфигурацию по умолчанию для указателей даты и настраиваемую конфигурацию для создания указателей времени. Проблема появилась, когда мне нужно было настроить 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        
        }           
      }
    }
  }

Я собирался добавить пример codeandandbox, но по какой-то причине он полностью игнорирует встроенную конфигурацию, поэтому не повторяет ошибку.

Вот скриншот, чтобы проиллюстрировать то, о чем я говорю, с точки зрения его заполнения без параметров конфигурации даты:

Есть идеи, что может быть причиной этого? Это проблема с встроенным конфигом? Я не был уверен, как это сделать по-другому.

Answer 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>