vue2 flatpickr 指令方法不适用于移动设备

Question

我想用a simple directive来使用flatpickr和vue.js，like the author suggest here：

import Flatpickr from "flatpickr";
import Vue from "vue";

// <input type="text" v-flatpickr="{'enableTime': true}"

Vue.directive("flatpickr", {
    bind: (el, binding) => {
        el._flatpickr = new Flatpickr(el, binding.value);
    },
    unbind: el => el._flatpickr.destroy()
});

我创建了a simple fiddle 看看这是否有效。 在桌面上一切都很好，但是当切换到移动模式（通过 chrome 开发工具）并按“运行”时，不会创建所需的输入。仅创建 hidden 输入（通过检查查看）。

有人知道这是什么原因造成的吗？

Answer 1

try {
    self.input.parentNode.insertBefore(self.mobileInput, self.input.nextSibling);
} catch (e) {
    //
}

self.input.parentNode === null

It also returns null if the node has just been created and is not yet attached to the tree.

使用插入代替绑定

Vue.component('greeting', {
  template: '<div><input type="text" v-flatpickr="{}" /></div>'
});

Vue.directive('flatpickr', {
  inserted: (el, binding) => {
    el._flatpickr = new flatpickr(el, binding.value)
  },
  unbind: el => el._flatpickr.destroy()
})

var vm = new Vue({
  el: '#app'
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<script src="https://cdn.rawgit.com/chmln/flatpickr/v3.0.5-1/dist/flatpickr.js"></script>
<link href="https://cdn.rawgit.com/chmln/flatpickr/v3.0.5-1/dist/flatpickr.css" rel="stylesheet"/>

<div id="app">
  <greeting></greeting>
</div>