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

Vue.js 3 で Select2 をラップした SFC その3 。 Select2 に Bootstrap 4 のテーマを適用する

まとめ

  • select2-theme-bootstrap4 パッケージを追加する。
  • SASS の laravel/resources/sass/app.scssselect2-theme-bootstrap4/dist/select2-bootstrap.min.css を読み込む。
  • Select2 の初期設定で、 theme: "bootstrap" とする。
カテゴリー
コンピューター

Vue.js 3 で Select2 をラップした SFC その2 。選択肢文字列以外の文字列 (ひらがなアルファベットなど) で絞り込む方法 (ちなみに Laravel 6 、 Vue.js 3 の環境)

やりたいこと

都道府県のセレクトボックスを Select2 で作る。フォーム入力で選択肢を絞りこめるが、このとき選択肢文字列だけではなくひらがな、アルファベット (半角) でも絞り込めるようにしたい。

Select2 に渡す選択肢の配列は次を想定している。

const options = [
  { id: "1", text: "北海道", hiragana: "ほっかいどう", alphabet: "hokkaido" },
  { id: "2", text: "青森県", hiragana: "あおもりけん", alphabet: "aomoriken" },
  { id: "3", text: "岩手県", hiragana: "いわてけん", alphabet: "iwateken" },
  { id: "4", text: "宮城県", hiragana: "みやぎけん", alphabet: "miyagiken" },
  { id: "5", text: "秋田県", hiragana: "あきたけん", alphabet: "akitaken" },
];

ちなみに本投稿は Vue.js 3 で Select2 をラップして SFC (シングルファイルコンポーネント) としてコンポーネント化する例 – oki2a24 の続きにあたります。

まとめ

次のことを行えば可能と予想し、実際に実現できました。

  1. Select2 へ渡す Options に適当なプロパティ A, B を追加する。
  2. Select2 で絞り込むときにプロパティ A, B も含めて検索する。
カテゴリー
コンピューター

Vue.js 3 で Select2 をラップして SFC (シングルファイルコンポーネント) としてコンポーネント化する例

やりたいこと

  • Vue.js 3 で Select2 をラップしたい

Vue.js 2 では、 ラッパーコンポーネント — Vue.js にて実際に Select2 のラッパーを作った例が提示されていました。

今回、 Vue.js 2 ではなく、 Vue.js 3 でこれを使いたい、というのが目的です。

なお、本投稿は Vue.js 3 でラップしてコンポーネント化した Dropzone.js の SFC (シングルファイルコンポーネント) を作り、利用する例を作った – oki2a24 の続きとなります。

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

Vue.js 3 でラップしてコンポーネント化した Dropzone.js の SFC (シングルファイルコンポーネント) を作り、利用する例を作った

やりたいことや前提

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

Laravel 6 。ファイルを扱うシンプルな CRUD API の例を作った (今後 Dropzon.js を試すために)

簡単な仕様

  • GET api/files ファイル情報の配列を取得する。
  • GET api/files/{file} 指定したファイル情報を取得する。
  • POST api/files ファイルを登録する。
  • PATCH api/files/{file} 指定したファイルを更新する。
  • DELETE api/files/{file} 指定したファイルを削除する。

ファイル登録時などのレスポンスは、最初、 URL だけでいいや、 DB で管理したく無いし、と思っていました。 しかし、 How to show files already stored on server – FAQ · Wiki · Matias Meno / Dropzone · GitLab を読むと name, size, url が Dropzone.js では必要なようです。 なので、面倒ではありますが DB でこれらを管理しようと思います。。。 こうなると、例えば POST 時のレスポンスは次のようになるかと思います。

{
  "name": "file.jpg",
  "size": 12345,
  "url": "http://localhost/storage/files/rXVtdVkqRvR7G0PYZUtupJNPmM9mPhdqrvkHI4Ly.jpg"
}
カテゴリー
コンピューター

Laravel 6 ユニットテストをする際 Docker Compose の環境変数を上書きできずにはまったが phpunit.xml ドキュメントを読んで解決した

まとめ

<php> 要素 (PHP INI 項目や定数、グローバル変数の設定) では、既存の環境変数は上書きされない。上書きしたいならば、 force 属性を使う。

ドキュメントはこちら。といいますか、 phpunit.xml で検索して最初のページでした。

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

Vue.js 用の Dropzone ライブラリを軽く試したメモ

まとめ

2021年5月4日現在、 Dropzone.js を Vue.js から簡単に使えるようにするためのライブラリの状況は、

環境

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

Laravel 6 、 Vue.js 3 のプロジェクトに Vue.js のルートとなるシングルファイルコンポーネント (SFC) を指定するメモ

まとめ

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

Laravel 6 、 Vue.js 3 のプロジェクトに Vue Router を追加するメモ

まとめ

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

Laravel 6 、 Vue.js 3 が入っただけの状態から、最初の SPA ページを用意するためにやること

仕組み

  • laravel/routes/web.php がリクエストを受け付ける。このとき、どんな URL でも 1 つの Blade ビューを返すように設定する。
  • 返された Blade ビューに記述しておいた <div id="app"></div><script src="{{ mix('/js/app.js') }}"></script> などにより、 Vue.js を使えるようになる。