TypeError: Cannot read property 'add' of undefined" Flatpickr & Vue.js

Question

我正在尝试将 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 但没有用。我做错了什么？

Answer 1

尝试进行以下更改：

在模板中...

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

在 mounted() 挂钩中...

mounted() {
    var myInput = this.$refs.flatpickr
    new Flatpickr(myInput, {

解释：

Vue 识别模板中元素的方法是使用 "ref"（而不是 "id"）- 最好让 Vue 满意，因为它对模板做了一些奇怪的事情，这可能会导致如果将其视为普通 HTML，则会出现意外行为。（它只是 看起来 像 HTML 但不要被愚弄......Vue 模板不是 HTML，实际上最终被编译成一个函数.)

因此，将输入的 ID 替换为 "ref"，并在您的 mounted() 挂钩中获取对输入的变量引用，并将其用作 Flatpickr() 调用的第一个参数一个“#id”。

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

Answer 2

改用this vue component。

安装：

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>

TypeError: Cannot read property 'add' of undefined" Flatpickr & Vue.js

TypeError: Cannot read property 'add' of undefined" Flatpickr & Vue.js

javascript

vue.js

vue-component

vuejs2

flatpickr

在模板中...

在 mounted() 挂钩中...