はじめに
一週間前から初めて触るVue + Laravelの環境で新規案件を開発しはじめました。
入力フォームの情報を確認画面に渡し、入力ミスなどで入力フォームに戻る際に、Laravelでフォームの情報を受け渡ししようかと奮闘しましたができず、結局Javascriptの力技で解決しました。。。多分
本来のやり方ではないと思いますが、良かったら参考にしてください。
環境
- バックエンド:PHP - Laravel8
- フロントエンド:Vue.js
- DB:Mysql ver8.0
- Docker使用
最初にやろうとしたこと
新規入力フォーム
userCreate.vue
<template>
<form @submit.prevent="submit">
<label for="name">名前</label>
<input type="text" id="name" name="name" v-model="form.name" />
<label for="email">メールアドレス</label>
<input type="text" id="email" name="email" v-model="form.email" />
<button name="test" type="submit">送信</button>
</form>
</template>
<script>
//中略
export default {
props: {
user: Object,
},
data() {
return {
// 戻った時に予め入力していた値を受け取り、フォームに復元する
form: this.$inertia.form({
name: this.user.name,
email: this.user.email,
}),
};
},
methods: {
submit() {
this.form.post(this.route("userconfirm"));
},
},
};
</script>
入力確認フォーム
userConfirm.vue
<template>
<form @submit.prevent="submit">
<table>
<tbody>
<tr>
<td>名前</td>
<td>{{ user.name }}</td>
</tr>
<tr>
<td>email</td>
<td>{{ user.email }}</td>
</tr>
</tbody>
</table>
<button name="back" type="submit">戻る</button>
<button name="send" type="submit">送信</button>
</form>
</template>
<script>
//中略
export default {
props: {
user: Object,
},
data() {
return {
form: this.$inertia.form({
name: this.user.name,
email: this.user.email,
}),
};
},
methods: {
submit() {
// data()内のformデータをコントローラに送る
this.form.post(this.route("usercomplate"));
},
},
};
</script>
laravel側コントローラー
userController.php
<?php
namespace App\Http\Controllers;
use Inertia\Inertia;
use Illuminate\Http\Request;
use App\Models\User;
class UserController extends Controller
{
public function create()
{
return Inertia::render('Mypage/UserCreate');
}
public function confirm(Request $request)
{
$user = $request->all();
return Inertia::render('Mypage/UserConfirm', ['user' => $user]);
}
public function complete(Request $request)
{
if($request->has('send')){
// ここに保存の処理
}elseif($request->has('back')){
// ここに新規入力フォームに戻る処理
$user = $request->all();
return Inertia::render('Mypage/UserConfirm', ['user' => $user]);
}
}
}
ボタンのnameを受け取りif文で条件分岐処理を行うのがLaravelのベストプラクティスかと思われますが、どうやってもname属性を受け渡しできずにLaravelでの処理は諦めました。。。。。
URLから受け取る処理をVueで実装する
新規入力フォーム
userCreate.vue
<template>
<form @submit.prevent="submit">
<label for="name">名前</label>
<input type="text" id="name" name="name" v-model="form.name" />
<label for="email">メールアドレス</label>
<input type="text" id="email" name="email" v-model="form.email" />
<button type="submit">送信</button>
</form>
</template>
<script>
//中略
export default {
props: {
user: Object,
},
data() {
// ①ここを追加
let url = new URL(window.location.href);
let params = url.searchParams;
return {
// ②パラメータを受け取り、フォームに復元する
form: this.$inertia.form({
name: params.get("name"),
email: params.get("email"),
}),
};
},
methods: {
submit() {
this.form.post(this.route("userconfirm"));
},
},
};
</script>
入力確認フォーム
userConfirm.vue
<template>
<form @submit.prevent="submit">
<table>
<tbody>
<tr>
<td>名前</td>
<td>{{ user.name }}</td>
</tr>
<tr>
<td>email</td>
<td>{{ user.email }}</td>
</tr>
</tbody>
</table>
<div @click="backpage">戻る</div>
<button type="submit">送信</button>
</form>
</template>
<script>
//中略
export default {
props: {
user: Object,
},
data() {
return {
form: this.$inertia.form({
last_name: this.user.name,
email: this.user.email,
}),
};
},
methods: {
submit() {
this.form.post(this.route("usercomplete"));
},
// 入力値が含まれるパラメーターを送る
backpage() {
this.form.get(this.route("usercreate"));
},
};
</script>
[戻る]をクリックしbackpageメソッド実行されると、下記のような入力データが入ったパラメータが送られるため①でURLを取得し、②で各項目をGetしてからdataに初期値を渡す。
http://localhost:8080//user/create?name=foobar&email=test@test.com
参考サイト
URLに含まれるGETパラメータを取得する
Laravelにて１つのFormで複数ボタンを実装する際の備忘録
正しい方法ではないかもしれませんがご参考まで