カテゴリー
コンピューター

Vue.js 3 で Dropzone をラップした SFC その 4 。ファイルアップロード前の確認などの操作を SFC 呼び出し元で自由に制御する

まとめ

  • Dropzone の addedfile イベント時に emit するが、この時に送出する変数としてイベント発生時に受け取れる file 以外に、 Dropzone オブジェクトも加える。

話としては、 Vue.js 3 で Dropzone をラップした SFC その3 。ファイルアップロード前に確認操作を挟む – oki2a24 の続きとなります。

カテゴリー
コンピューター

Vue.js 3 で Dropzone をラップした SFC その3 。ファイルアップロード前に確認操作を挟む

Vue.js 3 で Dropzone をラップした SFC その2 。 HTML 要素 の id ではなく要素そのものを指定して Dropzone と紐付ける等 – oki2a24 の続きとなります。

Dropzone はファイルをドロップや選択すると予め指定した URL に対して、自動的に即座にアップロードを開始します。 とても便利ですけれども、例えば、ヘッダに情報を追加した Axios を他のところでも使っているので Dropzone でも使いたい、ファイルアップロード前に確認操作を挟みたい、という時はどうしたら良いでしょうか?

本投稿では、ファイルアップロード前に確認操作を挟みたい、の例をとりあげます。

カテゴリー
コンピューター

Laravel 6 のメールの絡む開発用に MailHog の Docker コンテナを構築する方法のメモ

まとめ

  • Docker 側のコードは mailhog/mailhog イメージを使うだけ。
  • Laravel 側では、 .env を変更するだけ。
カテゴリー
Linux

Docker コンテナ内の Laravel から外部サービスを使わずにメールを送信するために Docker コンテナ内に exim4 をインストールしたらできた、という記録

まとめ

カテゴリー
Linux

【Vue.js 3】 Bootstrap4 ページネーションのシングルファイルコンポーネントを、参考サイトそのままに Vue.js 3 Compotision API 化したコード

はじめに

本投稿は、 【Vue.js】ページネーションコンポーネント(ページ遷移ごとにデータを取得するタイプ) | Wood-Roots:blog にて Vue.js 2 で書かれたページネーションのシングルファイルコンポーネント (SFC) を Vue.js 3 で書き直したものです。

元となった 【Vue.js】ページネーションコンポーネント(ページ遷移ごとにデータを取得するタイプ) | Wood-Roots:blog に感謝申し上げます!

また、本投稿は、本ブログの Vue.js 3 で flatpickr をラップした SFCその2 。ページ移動時に発生していたエラーを解消する – oki2a24 の続きとなります。

カテゴリー
コンピューター

Laravel 6 。フォームリクエストクラスの `rules` メソッド内でルートで定義されている URI パラメータにアクセスしている場合でも、ユニットテストを行う方法 4 つ

カテゴリー
コンピューター

Laravel 6 。ファイルを扱うシンプルな CRUD API の例、その2。バリデーションとそのテストを作った。

はじめに

Laravel 6 。ファイルを扱うシンプルな CRUD API の例を作った (今後 Dropzon.js を試すために) – oki2a24 の続きで、バリデーションとそのテストを作りました。

カテゴリー
コンピューター

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

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

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)
カテゴリー
コンピューター

Vue.js 3 で Dropzone をラップした SFC その2 。 HTML 要素 の `id` ではなく要素そのものを指定して Dropzone と紐付ける等

カスタマイズした内容

  • <template><div> 要素の id ではなく、 <div> 要素そのものを Dropzone を紐づくようにした。
  • Dropzone の options を渡せるようにした。
カテゴリー
コンピューター

Vue.js 3 で Select2 をラップした SFC その4 。さらにカスタマイズする

やったこと

  • Select2 の config をなんでも受け取れるようにする。
  • props の変更検知は 1 つの watch にまとめられるのではないか?
  • Bootstrap 4 テーマの時、バリデーションエラーのスタイルを適用できるようにする。