Javascript
バージョン Laravel 5.8 Vue.js 2.6.10 概要 郵便番号-住所検索API (zipaddress.net)の外部APIを呼び出して郵便番号から住所を取得する。 ※なぜこの方式を採用したのかは最後に記載します。 以下の流れになる。 vueから自サイトのAPIを呼び出してLaravel側の…
バージョン Vue.js 2.6.10 概要 一例として一覧表示の該当項目行の一部の値を更新し、その内容をリアクティブに表示反映する。 指定行を削除するのはググるとヒットしやすいが行の値の一部だけを更新するのがなかったので記載する。 コード ◾️hoge.vue <script> expo…
バージョン Laravel 5.8 Vue.js 2.6.10 概要 たとえばURL登録フォームのバリデーション設定が以下の場合 'url' => 'max:100|nullable|active_url', 空白の場合はバリデーションで引っかからないはずだが vueから登録しようとするとactive_url(urlバリデーシ…
バージョン Bootstrap 4 概要 以下のケースを想定。 一覧表に「削除」ボタン(type=button)が複数あり、クリック時にBootstrap 4の確認ダイアログを表示して 「はい」なら選択した行のキーをsubmitする。 Bootstrap 4の確認ダイアログを出すだけなら公式サイ…
バージョン Laravel 5.7 概要 バリデーションエラーなどでリダイレクトで元の画面に戻した際に 入力データ以外にPHP側で用意した配列情報をbladeのJavascriptに渡す。 コード ■TestController.php // バリデータ if ($validator->fails()) { // 渡すデータ配…
概要 select要素のセレクトボックスで階層化されたメインカテゴリーを選択すると 関連したサブカテゴリーに表示を連動させる。 ①サブカテゴリーの初期表示は未選択状態を示すoption要素のみを表示 ②メインカテゴリーで項目を選択する ③サブカテゴリーは連動…
ジグザグ線(波線)を描画する 開始点と終了点を指定し、ジグザグ線を描画する方法。 Javascriptだけでなく他の言語でも応用できる。 <html> <head> <script> class Point{ constructor(x,y){ this.x = x; this.y = y; } } var startP = new Point(50,60); var endP = new Point</head></html>…