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 ===空

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>