[英]TypeError: Cannot read property 'add' of undefined" Flatpickr & Vue.js
I'm trying to wrap flatpickr into a custom Vue component which should then should send dates to an eventHub, however I can't seems to get it to work. 我正在尝试将flatpickr包装到自定义的Vue组件中,然后该组件应该将日期发送到eventHub,但是我似乎无法使其正常工作。 Somehow flatpickr can't find the input field (I think)
Flatpickr以某种方式找不到输入字段(我认为)
My wrapper component looks something like this: 我的包装器组件看起来像这样:
<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>
I've also tried to use .class-name
but nothing. 我也尝试过使用
.class-name
但是什么也没有。 What am I doing wrong? 我究竟做错了什么?
Try making the following changes: 尝试进行以下更改:
<input type="text" ref="flatpickr" placeholder="Select a range" />
mounted() {
var myInput = this.$refs.flatpickr
new Flatpickr(myInput, {
Explanation:
The Vue way of identifying elements in the template is by using "ref" (instead of "id") - and it's best to keep Vue happy because it does funky things with the template which may cause unexpected behaviours if you treat it as plain HTML. Vue识别模板中元素的方法是使用“ ref”(而不是“ id”)-最好让Vue开心,因为它会对模板做一些时髦的事情,如果将其视为纯HTML可能会导致意外行为。 (It only looks like HTML but don't be fooled... the Vue template isn't HTML, and actually ends up getting compiled into a function.)
(它看起来像HTML,但不会被欺骗……Vue模板不是HTML,实际上最终被编译成一个函数。)
So, replace the input's id with a "ref" instead, and in your mounted() hook, get a variable reference to the input, and use that as the first parameter of your Flatpickr() call instead of an "#id". 因此,将输入的ID替换为“ ref”,然后在mount()钩子中获取对输入的变量引用,并将其用作Flatpickr()调用的第一个参数,而不是“ #id”。
JSFiddle: https://jsfiddle.net/CookieJon/7stotLrz/2/ JSFiddle: https ://jsfiddle.net/CookieJon/7stotLrz/2/
Use this vue component instead. 请改用此vue组件 。
Installation: 安装:
npm install vue-flatpickr-component --save
It is dead simple to use. 它非常简单易用。
Sample: 样品:
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.