まとめ
select2-theme-bootstrap4パッケージを追加する。- SASS の
laravel/resources/sass/app.scssでselect2-theme-bootstrap4/dist/select2-bootstrap.min.cssを読み込む。 - Select2 の初期設定で、
theme: "bootstrap"とする。
月: 2021年5月
やりたいこと
都道府県のセレクトボックスを 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 の続きにあたります。
まとめ
次のことを行えば可能と予想し、実際に実現できました。
- Select2 へ渡す Options に適当なプロパティ A, B を追加する。
- Select2 で絞り込むときにプロパティ A, B も含めて検索する。
やりたいこと
- Vue.js 3 で Select2 をラップしたい
Vue.js 2 では、 ラッパーコンポーネント — Vue.js にて実際に Select2 のラッパーを作った例が提示されていました。
今回、 Vue.js 2 ではなく、 Vue.js 3 でこれを使いたい、というのが目的です。
なお、本投稿は Vue.js 3 でラップしてコンポーネント化した Dropzone.js の SFC (シングルファイルコンポーネント) を作り、利用する例を作った – oki2a24 の続きとなります。
やりたいことや前提
- Laravel 6 。ファイルを扱うシンプルな CRUD API の例を作った (今後 Dropzon.js を試すために) – oki2a24 の続き。 Lareavel 6 で Vue.js 3 を利用する環境となる。
- Dropzone.js には、アップロードしたいファイルを受け取ってサーバへリクエストしてもらい、結果をレスポンスとして返して欲しい。
サーバ側の API エンドポイントは以下 (詳細は Laravel 6 。ファイルを扱うシンプルな CRUD API の例を作った (今後 Dropzon.js を試すために) – oki2a24 を参照) 。
GET api/filesファイル情報の配列を取得する。GET api/files/{file}指定したファイル情報を取得する。POST api/filesファイルを登録する。PATCH api/files/{file}指定したファイルを更新する。DELETE api/files/{file}指定したファイルを削除する。
- 逆にいうとそれ以外のこと、アップロード済のファイルのリスト表示や、ファイルの削除操作、は、 Dropzone.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"
}
まとめ
<php> 要素 (PHP INI 項目や定数、グローバル変数の設定) では、既存の環境変数は上書きされない。上書きしたいならば、 force 属性を使う。
ドキュメントはこちら。といいますか、 phpunit.xml で検索して最初のページでした。
まとめ
2021年5月4日現在、 Dropzone.js を Vue.js から簡単に使えるようにするためのライブラリの状況は、
- rowanwins/vue-dropzone: A Vue.js component for Dropzone.js – a drag’n’drop file uploads utility with image previews はインストールできたがエラーで使えなかった。
- Yaxian/vue3-dropzone: HTML5 drag-drop zone with vue3 は使えた。
環境
- Laravel 6 上の Vue.js 3 の SPA
- Laravel 6 、 Vue.js 3 のプロジェクトに Vue.js のルートとなるシングルファイルコンポーネント (SFC) を指定するメモ – oki2a24 の続き
まとめ
- 本投稿は Laravel 6 、 Vue.js 3 のプロジェクトに Vue Router を追加するメモ – oki2a24 の続きである。
createAppの引数に Vue.js のルートとなるシングルファイルコンポーネント (SFC) を指定すればよい。- ファイルの構成は Vue Cli で Vue Router 付きで作成したプロジェクトを参考にした。
- ルートとなる SFC は
App.js - Vue Router ファイルは
router/index.js
- ルートとなる SFC は
まとめ
- 本投稿は Laravel 6 、 Vue.js 3 が入っただけの状態から、最初の SPA ページを用意するためにやること – oki2a24 の続きとなります。
npm install --save-dev vue-router@4でインストール- Vue Router を動かすだけの簡単なサンプルを、 Getting Started | Vue Router をほぼそのまま使って作り、動作確認
仕組み
laravel/routes/web.phpがリクエストを受け付ける。このとき、どんな URL でも 1 つの Blade ビューを返すように設定する。- 返された Blade ビューに記述しておいた
<div id="app"></div>や<script src="{{ mix('/js/app.js') }}"></script>などにより、 Vue.js を使えるようになる。