Laravel, formでpostするとエラー「The POST method is not supported for this route」が出る

Question

Laravel9, vue3のコンポーネント中でバリデーションした後formをpost送信していますが、
以下のエラーが出て困っております。

The POST method is not supported for this route. Supported methods: GET, HEAD, PUT, PATCH, DELETE.

■ItemsCreate.vue

<template>                                   
     <div>
           <div>                                
                <form method="post" action="{{ route('user.items.store') }}" @submit.prevent="register" enctype="multipart/form-data" name="sampleform">
                      <input type="hidden" name="_token" :value="csrf">
                      <div class="m-2">
                          <div class="p-2 w-full">
                                <div class="relative">
                                      <label for="name" class="leading-7 text-sm text-gray-600">商品名</label>
                                      <input type="text" id="name" name="name" v-model="form.name" >
                                </div>
                          </div>
                          <div class="p-2 w-full">
                                <div class="relative">
                                     <label for="price" class="leading-7 text-sm text-gray-600">料金</label>
                                     <input type="number" id="price" name="price" v-model="form.price" >
                               </div>
                          </div>                                                                      
                         <div class="p-2 flex justify-around mt-4 w-1/2 mx-auto">                                        
                               <button>
                                      formのpost
                               </button>
                         </div>
                  </div>
           </form>
     </div>
</div>                    
                     
</template>
<script setup>
import { reactive } from 'vue'

const form = reactive({
    name: null,
    memo: null,
    price: null
})

// formからpostする場合はこちら
const csrf = document.querySelector('meta[name="csrf-token"]').getAttribute('content')

const register = () => {
    // バリデーション省略。
   // バリデーション後submit▼
    document.sampleform.submit() // submitする
}
</script>

■web.php

Route::resource('items', ItemController::class)->middleware(['auth', 'verified']);

■php artisan route:listの結果

routeのuser.items.storeはありますが……

■controller。ItemController.php

public function store(StoreItemRequest $request)
    {
        dd($request);
    }

すぐにddしています。
が、エラーが出ます。

<form method="post" action="{{ route('user.items.store') }}"

を、

<form method="post" action="/items"

にすると問題なくddされますが、なぜroute()の書き方だとダメなのかわかりません。。
キャッシュのクリアはしました。

php artisan cache:clear &&
php artisan config:clear &&
php artisan config:cache &&
php artisan route:clear &&
php artisan view:clear

よろしくお願いいたします。

Answer 1

"{{ route('user.items.store') }}"はPHPのコード。
vue内でPHPを書いても動くわけない。
Ziggy使えばJS側でroute()を使えるけどそんな話する段階じゃない。

Comments

[mikeko0901]

ありがとうございます！
PHPのコードでした…