TypeError: Невозможно прочитать свойство 'add' из неопределенного " Flatpickr & Vue.js

Я пытаюсь обернуть flatpickr в пользовательский компонент Vue, который затем должен посылать даты в eventHub, однако я не могу заставить его работать. Каким-то образом flatpickr не может найти поле ввода (я думаю)

Мой компонент-обертка выглядит примерно так:

<template>
<input type="text" id="flatpickr" placeholder="Select a range" />
</template>

<script>
const Flatpickr = require("flatpickr");

var defaultStart = new Date(new Date().setDate(new Date().getDate() - 10)).toISOString().slice(0, 10)
var defaultEnd = new Date().toISOString().slice(0, 10)

export default {
  name: 'DatePicker',
  props:['startDate', 'endDate'], // I don't really need this but I should pass data to all Children
  mounted() {
    new Flatpickr('#flatpickr', {
      dateFormat: "Y-m-d",
      mode: 'range',
      altInput: true, // Human Readable
      minDate: new Date().fp_incr(-60), // 60 days from today
      maxDate: defaultEnd,
      // defaultDate: [defaultStart, defaultEnd],
      // minDate: '2017-01-01', // 60 days from today
      // maxDate: '2017-05-05',
      // defaultDate: ["2017-02-02", "2017-04-04"],
      locale: { firstDayOfWeek: 1},
      onClose: function(selectedDates, dateStr, instance) {
        let startDate = selectedDates[0].toISOString().slice(0, 10);
        let endDate = selectedDates[1].toISOString().slice(0, 10);
        this.$emit('change', { startDate, endDate });  // emit to eventHub
      }
    })
  }
}
</script>

Я также пытался использовать .class-name но ничего. Что я делаю неправильно?

Источник

2 ответа

Решение

Попробуйте внести следующие изменения:

В шаблоне...

<input type="text" ref="flatpickr" placeholder="Select a range" />

В установленном () крюке...

mounted() {
    var myInput = this.$refs.flatpickr
    new Flatpickr(myInput, {
Объяснение:

Vue идентифицирует элементы в шаблоне с помощью "ref" (вместо "id") - и лучше всего, чтобы Vue был доволен, потому что он делает с шаблоном странные вещи, которые могут вызвать неожиданное поведение, если вы воспринимаете его как простой HTML, (Он выглядит только как HTML, но не обманывайте себя... шаблон Vue не является HTML, и фактически заканчивается компиляцией в функцию.)

Итак, замените идентификатор входа на "ref" вместо этого, и в вашей ловушке mount () получите ссылку на переменную для входа и используйте ее в качестве первого параметра вашего вызова Flatpickr() вместо "#id".

JSFiddle: https://jsfiddle.net/CookieJon/7stotLrz/2/

Источник

Вместо этого используйте этот компонент vue.

Монтаж:

npm install vue-flatpickr-component --save

Это очень просто в использовании.

Образец:

<template>
  <div>
    <flat-pickr v-model="date"></flat-pickr>
  </div>
</template>

<script>
  import flatPickr from 'vue-flatpickr-component';
  import 'flatpickr/dist/flatpickr.css';

  export default {    
    data () {
      return {
        date: null,       
      }
    },
    components: {
      flatPickr
    }
  }
</script>
Источник
Другие вопросы по тегам