Laravel / Vuetify でフォーム画面作成

Question

vuetifyでフォーム画面を作成しています。

ボタンを押すとモーダルウィンドウが開き、そこに表示されるフォームを入力。
送信ボタンをクリックすることによりDBに保存を実現したいです。

一連の動作を以下のようにコンポーネント化して読み込んでいます。

<template>
  <v-row justify="center">
    <v-dialog
      v-model="dialog"
      max-width="600px"
    >
      
      <template v-slot:activator="{ on, attrs }">
        <v-btn
          color="blue darken-1"
          dark
          depressed
          small
          v-bind="attrs"
          v-on="on"
        >
          投稿
        </v-btn>
      </template>
      
      <v-card>

        <v-card-text>
          <v-container>
            <form action="user_post" method="post">
              
              <!--csrfトークン-->
              <input type="hidden" name="_token" :value="csrf">
   
              <v-select
                v-model="select"
                :items="attributes"
                :rules="[v => !!v || 'Item is required']"
                label="タグ*"
                name="attributes"
                required
              ></v-select>　　

              <v-text-field
                label="タイトル*"
                hint="見出しを設定しましょう。"
                name="title"
                persistent-hint
                required
              ></v-text-field>

              <v-textarea
                label="内容*"
                hint="コンテンツを投稿しましょう。"
                name="knowledge"
                persistent-hint
                required
              ></v-textarea>

            </form>
          </v-container>
        </v-card-text>

        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="blue darken-1" text @click="submit">投稿</v-btn>
        </v-card-actions>
        
      </v-card>
    </v-dialog>
  </v-row>
</template>

<script>
  
  export default{
    data: () => ({
      select: null,
      attributes: [
        'テスト１',
        'テスト２',
        'テスト３',
      ],
      dialog: false,
    }),
  }

</script>

なお、Laravelのコントローラー側は以下のように記述

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use DB;
use App\HOGEMODEL;

class HOGEController extends Controller
{
    public function store(Request $request){
      HOGE::create($request->all());
      return redirect('/');
    }
}

現在の挙動としては、送信ボタンを押しても何も動作されません。
java scriptの知識が浅いこともあり、どなたかお力添え頂けますとうれしいです。
よろしくお願い致します。

Answer 1

v-btnは
<button type='button'>として解釈されるためform送信には適しません

Comments

[tktail]

ご回答ありがとうございます。
<input type="submit" class="btn btn-primary">に変更し、form内に入れることによってとりあえずは次の画面に行きました。
次の画面で419エラーが出ますので、csrf対策の見直しをする予定ですが、component内で@csrfは使えませんし、解決方法はありますでしょうか？

[mikkame]

metaにcorsをトークンを埋め込んでおく
というのが一般的に使われています。
（ajaxの場合）
ajaxで送信するか
form送信の場合ならコンポーネント内でheadのmetaタグからcorsを探してくるような感じにしてinput hiddenにぶち込めばいいと思います

[tktail]

ありがとうございます。
metaには<meta name="csrf-token" content="{{ csrf_token() }}">の記述がありまして。

コンポーネントファイルには
<input type="hidden" name="_token" :value="csrf">ということで

dataプロパティに
csrf: document.querySelector('meta[name="csrf-token"]').getAttribute('content')
を追記してみました。
しかし、動きません。。。

この場合、どのあたりを見直せばよろしいでしょうか？
csrf部分をslotにして@csrfを埋め込んだら動きますが、スマートじゃない気がして。。