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

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 テーマの時、バリデーションエラーのスタイルを適用できるようにする。
カテゴリー
コンピューター

Laravel 6 に構築した Vue.js 3 SPA で、 Bootstrap 4 のモーダルをラッパー SFC (シングルファイルコンポーネント) 化した例

はじめる前に

本投稿は時系列としては 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 の SPA で `npm run production` が失敗する問題を修正する

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

Laravel 6 の Vue.js 3 で、デイトピッカー flatpickr のラッパーシングルファイルコンポーネント (SFC) を作った

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

デイトピッカー flatpickr のラッパーコンポーネントライブラリのラッパー SFC を作る (Laravel 6 の Vue.js 3 の SPA 環境)

やりたいこと

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

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

Vue.js 3 でラップしてコンポーネント化した Dropzone.js にちょっとしたカスタマイズをいくつか加えた

やりたいこと

  • Dropzone.js エリアの文言を変更したい。
  • ファイルアップロード成功後は Dropzone.js エリアのサムネイルを自動的に消したい。
  • アップロードエラー時のメッセージを変更したい。
  • ファイルアップロード失敗後は Dropzone.js エリアのボタンクリックでサムネイルを消したい。