Vue.js
バージョン Laravel 5.8 Vue.js 2.6.10 概要 郵便番号-住所検索API (zipaddress.net)の外部APIを呼び出して郵便番号から住所を取得する。 ※なぜこの方式を採用したのかは最後に記載します。 以下の流れになる。 vueから自サイトのAPIを呼び出してLaravel側の…
バージョン Vue.js 2.6.10 概要 routerのpushでURL遷移する際にpropsにデータを渡す方法。 コード ◾️hoge.vue(遷移元) <script> export default { methods: { newPage() { this.$router.push({ name: "user_list" , params: {user_code : this.userid}}).catch(() </script>…
バージョン Vue.js 2.6.10 概要 一例として一覧表示の該当項目行の一部の値を更新し、その内容をリアクティブに表示反映する。 指定行を削除するのはググるとヒットしやすいが行の値の一部だけを更新するのがなかったので記載する。 コード ◾️hoge.vue <script> expo…
バージョン Vue.js 2.6.10 概要 pushを使えば遷移できるが、今回はパスだけ取得したいケース。 resolveを使えばパスを取得できる。URLパラメータのある場合もOK。 コード ◾️router.js { path: "/user/list", name: "userlist", component: () => import("./v…
バージョン Laravel 5.8 Vue.js 2.6.10 概要 たとえばURL登録フォームのバリデーション設定が以下の場合 'url' => 'max:100|nullable|active_url', 空白の場合はバリデーションで引っかからないはずだが vueから登録しようとするとactive_url(urlバリデーシ…
バージョン Laravel 5.8 Vue.js 2.6.10 概要 Laravel側で管理しているconfigフォルダで管理している値や定数などを Vue側から呼ばれたAPIに渡して判定条件や表示文字列に使用する。 渡したい値が1つや2つであれがblade側で以下のようにして渡せる。 <hoge-component code="{{ $user_code }}"></hoge-component> しか…