タグ: flatpickr

ページ移動時に発生していたエラー内容

Vue Router のリンクをクリックすると、次のエラーが発生していました。

Uncaught (in promise) TypeError: flatpickr__WEBPACK_IMPORTED_MODULE_1__.default.destroy is not a function
    at app.js:17969
    at callWithErrorHandling (app.js:6469)
    at callWithAsyncErrorHandling (app.js:6478)
    at Array.hook.__weh.hook.__weh (app.js:9214)
    at flushPostFlushCbs (app.js:6669)
    at flushJobs (app.js:6705)

はじめに

デイトピッカー flatpickr のラッパーコンポーネントライブラリのラッパー SFC を作る (Laravel 6 の Vue.js 3 の SPA 環境) – oki2a24 では flatpickr を Vue.js で使いやすくしたライブラリ のラッパー SFC を作りました。

関連

• Vue.js 3 で flatpickr をラップした SFCその2 。ページ移動時に発生していたエラーを解消する – oki2a24

やりたいこと

• Vue.js 3 で作った SPA で、デイトピッカーを使いたい。
• flatpickr/flatpickr: lightweight, powerful javascript datetimepicker with no dependencies がよさそうで、今回これをとりあげる。
  • 公式ドキュメント → Introduction
• 簡単に使いたいので、デイトピッカーのシングルファイルコンポーネント (SFC) を用意したい。
• 簡単に使えそうなラッパーライブラリ ankurk91/vue-flatpickr-component: Vue.js component for Flatpickr datetime picker があるので、これを利用してみた。

ちなみに、 Vue.js 3 でラップしてコンポーネント化した Dropzone.js にちょっとしたカスタマイズをいくつか加えた – oki2a24 あたりの続きになります。