Vue 頁面嘗試發送請求兩次。 我正在使用慣性，Laravel，vue3

Question

<template>
  <app-layout title="Dashboard">
    <template #header>
      <h2 class="h4 font-weight-bold">Create</h2>
    </template>

    <div class="container mt-5 text-gray-300">
      <form @click="submit" enctype="multipart/form-data">
      <input type="hidden" name="region" v-bind="form.region">
        <div class="form-group">
          <label for="title">title</label>
          <input
            type="text"
            name="title"
            class="form-control"
            v-model="this.form.title"
          />
        </div>
        <div class="form-group text-gray-300">
          <label for="content">content</label>
          <div>
            <textarea
              type="text"
              name="content"
              class="form-control"
              v-model="this.form.content"
            >
            </textarea>
          </div>
        </div>

        <br />
        <br />
        <div class="form-group">
          <label for="file">file</label>
          <input type="file" name="image"
          @change="previewImage"
                                    ref="photo" />
                                    <img
                                    v-if="url"
                                    :src="url"
                                    class="w-full mt-4 h-80"
                                />
        </div>

        <br />
        <br />
        <br />
        <br />
        <br />
        <div>
          <button
            type="button"
            style="color: lavender"
            class="btn btn-secondary"
          >
            store post!
          </button>
          &nbsp; &nbsp;

          <button
            type="button"
            onclick="location.href='index'"
            style="color: lavender"
            class="btn btn-dark"
          >
            cancel and go back
          </button>
        </div>
      </form>
    </div>
  </app-layout>
</template>

<script>
import { defineComponent } from "vue";
import AppLayout from "@/Layouts/AppLayout.vue";
import { InertiaLink, useForm } from "@inertiajs/inertia-vue3";

export default defineComponent({
  props:['region1'],
  components: {
    AppLayout,
    InertiaLink,
  },

  data(){
        return{
            regionN:"zz",
        }
    },

  setup() {
    const form = useForm({
      title: null,
      content: null,
      image: null,
      region :null
    });

    return { form };
  },
  methods: {
    submit(e) {
 
                this.form.image = this.$refs.photo.files[0];
       
       this.form.region = this.regionN;
      this.form.post(route("store"));
    }, 
    previewImage(e) {
            const file = e.target.files[0];
            this.url = URL.createObjectURL(file);
        },
  },
 
  mounted(){
    this.regionN = this.region1;
    console.log(this.regionN);
   
  }
});
</script>

這是我的創建頁面

<template>
  <app-layout title="Dashboard">
    <template #header>
      <h2 class="h4 font-weight-bold">Show</h2>
    </template>

    <div class="m-20 flex justify-center">
      <div class="card">
        <div class="card-body">
           <img class="card-img-top" :src=posts.image alt="Card image cap">
                               
          <ul class="list-group list-group-flush">
            <li class="list-group-item">dlalwl :</li>
            
            <li class="list-group-item">제목 : {{ posts.title }}</li>
            <li class="list-group-item">내용 :{{ posts.content }}</li>
            <li class="list-group-item">등록일 :{{ posts.created_at }}</li>
            <li class="list-group-item">수정일 : {{ posts.updated_at }}</li>
            <li class="list-group-item">작성자 : {{ posts.user_id }}</li>
            <li class="list-group-item">
              <div class="btn-group">
                <InertiaLink
                  :href="route('edit', { id: posts.id })"
                  class="btn btn-warning"
                  method="get"
                  >edit btn</InertiaLink
                >
                 <InertiaLink
                  :href="route('delete', { id: posts.id })"
                  class="btn btn-warning"
                  method="delete"
                  >delete btn</InertiaLink
                >
              </div>
            </li>
            <div class="card" style="width: 30rem">
              <div class="card-body">댓글</div>
            </div>
          </ul>
        </div>
      </div>
    </div>
  </app-layout>
</template>

<script>
import { defineComponent } from "vue";
import AppLayout from "@/Layouts/AppLayout.vue";
import { InertiaLink } from "@inertiajs/inertia-vue3";

export default defineComponent({
  components: {
    AppLayout,
    InertiaLink,
  },
  props: ["posts"],
});
</script>

這是我的展示頁面（發送刪除方法也可以使用兩次）

<?php

namespace App\Http\Controllers;

use App\Models\Post;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\DB;
use Illuminate\Support\Facades\Redirect;
use Illuminate\Support\Facades\Storage;
use Inertia\Inertia;

class PostController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        //
    }

    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create(Request $request)
    {
        $b2018 = DB::table('crimes')->get();
        $t2018 = json_decode(json_encode($b2018), true);





        $region1 = $request->region1;


        return Inertia::render('Create', ["region1" => $region1, 'age' => $t2018]);
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {

        $request->validate([
            'title' => 'required|min:3',
            'content' => 'required|min:3',
            'image' => 'required'
        ]);
        $post = new Post();
        $post->title = $request->title;
        $post->content = $request->content;
        $post->user_id = Auth::user()->id;
        $post->region  = $request->region;

        if ($request->hasFile('image')) {
            $image_path = $request->file('image')->store('image', 'public');
        }
        $post->image = "/storage/" . $image_path;

        $post->save();


        // $posts = Post::all();

        $b2018 = DB::table('crimes')->get();
        $t2018 = json_decode(json_encode($b2018), true);





        $region1 = $request->region1;



        return Redirect::route('dashboard');
    }

    /**
     * Display the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function show($id)
    {

        $posts = Post::find($id);

        return Inertia::render('Show', ["posts" => $posts]);
    }

    /**
     * Show the form for editing the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function edit($id)
    {
        $post = Post::find($id);
        return Inertia::render('Edit', ["post" => $post]);
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, $id)
    {
        $post = Post::find($id);
        $post->title = $request->title;
        $post->content = $request->content;
        $post->user_id = Auth::user()->id;

        if ($request->hasFile('image')) {

            $fileName = time() . '_' . $request->file('image')->getClientOriginalName();

            $request->file('image')->storeAs('public/images', $fileName);

            if ($fileName) {
                $input = array_merge($input, ['image' => $fileName]);
            }
        }




        $post->save();


        $posts = Post::find($id);



        return Inertia::render('Show', ["posts" => $posts]);
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function destroy($id)
    {
        $post = Post::find($id);
        $post->delete();

        //게시글에 첨부된 이미지가 있으면 , 파일시스템에서도 삭제 해 줘야합니다.

        if ($post->image) {
            Storage::delete('public/images/' . $post->image);
        }

        return Redirect::route('dashboard');
    }
}

這是我的 controller

<?php

use App\Http\Controllers\PostController;
use App\Http\Controllers\ServiceController;
use Illuminate\Foundation\Application;
use Illuminate\Support\Facades\Route;
use Inertia\Inertia;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return Inertia::render('Welcome', [
        'canLogin' => Route::has('login'),
        'canRegister' => Route::has('register'),
        'laravelVersion' => Application::VERSION,
        'phpVersion' => PHP_VERSION,

    ]);
});

Route::middleware(['auth:sanctum', 'verified'])->get('/dashboard', function () {
    return Inertia::render('Dashboard');
})->name('dashboard');



Route::get('/chart', [ServiceController::class, 'chart'])->name('chart');

Route::get('/map1', function () {
    return Inertia::render('Map1');
})->name('map1');

Route::post('/post/update/{id}', [PostController::class, 'update'])->name('update');

Route::get('/post/edit/{id}', [PostController::class, 'edit'])->name('edit');

Route::get('/post/show/{id}', [PostController::class, 'show'])->name('show');

Route::delete('/post/delete/{id}', [PostController::class, 'destroy'])->name('delete');



Route::get('/post/create', [PostController::class, 'create'])->name('create');

Route::post('/post/store', [PostController::class, 'store'])->name('store');

Route::get('/map2', [ServiceController::class, 'map'])->name('chart');

Route::get('/index', [ServiceController::class, 'index'])->name('index');




// Route::get('file-import-export', [UserController::class, 'fileImportExport']);
// Route::post('file-import', [UserController::class, 'fileImport'])->name('file-import');
// Route::get('file-export', [UserController::class, 'fileExport'])->name('file-export');

這是我的 web.php

我單擊了存儲並刪除了一次，但兩個請求都發送了兩次。

我添加了 prevent.default 但它似乎不起作用。

我該如何處理？

我正在使用慣性，laravel 和 vue3

我的首頁是由 vue3 制作的

幫我解決這個問題。。

Answer 1

您應該檢查您的發件人是否仍在處理中。

 submit () {
        if (this.form.processing) {
            return false
        }
        this.form.post('/you-url/', {
        preserveScroll: true,
        onSuccess: () => this.form.reset(),
        })
    },