#開発環境
| ツール | バージョン |
|---|
| Laravel | 7.12.0 |
| node | v8.10.0 |
| npm | 3.5.2 |
#困っていること
現在LaravelのbladeテンプレートにVueRouterとcomponentを使用し、シングルページアプリケーションを作成しています。そのアプリケーション内のVueRouterに指定されたContribute.vueというcomponentの中にはhtmlのformタグがあり、postリクエストを受けてバックエンドのメソッドが実行される仕組みになっています。実際にこのcomponentを実行したところ、419エラーが出てしまったので、bladeテンプレートでやっていることと同じようにformタグ内へ@csrfを行ったところ、そのcomponent内では無効になってしまい、せっかくcsrfトークンを発行してもformタグへの受け渡しがうまくいきません。
どうしたらそのcomponent内のformタグ内へ発行したcsrfトークンを受け渡すことができるのでしょうか？
#ブラウザのデベロッパーツールのElements
画像のように<input type="hidden" name="_token" value=略>でトークンを発行しているのですが、そのトークンが送信する対象の<form action="/contribute" method="post" enctype="multipart/form-data">...</form>内にないのでpostメソッドが送られても419エラーが出てしまいます。
#実際のコード
Viewのコード
html
1<html>
2<head>
3<meta name="csrf-token" content="{{ csrf_token() }}">
4</head>
5<body>
6<div id="adminerApp">
7<h1>Success!</h1>
8
9<nav>
10@csrf
11<router-link to="/contribute">投稿フォームへ</router-link>
12<router-link to="/controll-users">ユーザー管理ページへ</router-link>
13</nav>
14<router-view></router-view>
15
16</div>
17<script src="{{ asset('/js/app.js') }}"></script>
18</body>
19</html>
/resources/js/app.js
js
1import './bootstrap' import Vue from 'vue';
2import VueRouter from 'vue-router';
3import Contribute from './components/Contribute.vue';
4
5
6window.Vue = Vue;
7Vue.use(VueRouter);
8
9const adminerRouter = new VueRouter({
10 routes: [
11 {
12 path: '/contribute',
13 component: Contribute
14 },
15 {
16 path: '/controll-users',
17 component: ControllUsers
18 },
19 ]
20});
21
22const appAdminer = new Vue({
23 el: '#adminerApp',
24 router:adminerRouter
25 })
Contribute.vue
vue
1<template>
2<div>
3<h1>投稿フォーム</h1>
4<form action="/contribute" method="post" enctype="multipart/form-data">
5<p>タイトル</p>
6<input type="text" name="title">
7<p>内容</p>
8<textarea name="contents" rows="5" cols="50"></textarea>
9<p>画像</p>
10<input type="file" name="picture">
11<p>ジャンル</p>
12<select name="genre">
13<option value="アニメ">アニメ</option>
14<option value="アクション">アクション</option>
15<option value="アドベンチャー">アドベンチャー</option>
16<option value="SF">SF</option>
17<option value="コメディ">コメディ</option>
18<option value="サスペンス">サスペンス</option>
19<option value="青春">青春</option>
20<option value="戦争">戦争</option>
21<option value="ドキュメンタリー">ドキュメンタリー</option>
22<option value="ドラマ">ドラマ</option>
23<option value="ファンタジー">ファンタジー</option>
24<option value="ホラー">ホラー</option>
25<option value="ミュージカル・音楽">ミュージカル・音楽</option>
26<option value="恋愛">恋愛</option>
27</select>
28<input type="submit" value="投稿">
29</form>
30</div>
31</template>
32
33<script></script>
Q&A
ベストアンサー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/06/08 09:14