はじめに
Laravel 6 。ファイルを扱うシンプルな CRUD API の例を作った (今後 Dropzon.js を試すために) – oki2a24 の続きで、バリデーションとそのテストを作りました。
月: 2021年6月
ページ移動時に発生していたエラー内容
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)
カスタマイズした内容
<template>の<div>要素のidではなく、<div>要素そのものを Dropzone を紐づくようにした。- Dropzone の options を渡せるようにした。
やったこと
- Select2 の config をなんでも受け取れるようにする。
propsの変更検知は 1 つの watch にまとめられるのではないか?- Bootstrap 4 テーマの時、バリデーションエラーのスタイルを適用できるようにする。
はじめる前に
本投稿は時系列としては Laravel 6 、 Vue.js 3 の SPA で npm run production が失敗する問題を修正する – oki2a24 の続きとなります。
作ったものの構成
- モーダルを呼び出すページを用意する。
- モーダルに表示するコンテンツ部分を 1 つの別のコンポーネントとして作成する。このモーダルコンテンツコンポーネントから、基底となるモーダルコンポーネントを呼び出す。
- モーダルの外側を 1 つのコンポーネントとして作成する。基底モーダルコンポーネントと呼ぶ。ここが Bootstrap 4 のモーダルをラップした部分。
使うときのポイント
- モーダルがマウントされるのは、モーダル呼び出し元のページがマウントされる時と同じタイミングとなる点に注意。モーダル表示のタイミングで実行したいことがあるならば、モーダルのイベントを使う必要がある。
- モーダル SFC を使うコンテンツコンポーネントで設定した HTML の id は props で与えないような構造としてしまってもよいと思った。ただし、そうするとモーダルを呼び出す側がコンテンツコンポーネントの内部に書かれている HTML id を調べに行く必要が出てくるので、やりづらさを感じる。
はじめる前に
環境構築と指定は、 Laravel 6 で Vue.js 3 を使えるようにするまでの試行錯誤の記録 – oki2a24 の続きとなります。純粋な時系列としては Laravel 6 の Vue.js 3 で、デイトピッカー flatpickr のラッパーシングルファイルコンポーネント (SFC) を作った – 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 あたりの続きになります。
やりたいこと
- Dropzone.js エリアの文言を変更したい。
- ファイルアップロード成功後は Dropzone.js エリアのサムネイルを自動的に消したい。
- アップロードエラー時のメッセージを変更したい。
- ファイルアップロード失敗後は Dropzone.js エリアのボタンクリックでサムネイルを消したい。