php - Laravel 8 Jetstream Inertia 所有 Inertia 请求都必须收到有效的 Inertia 响应

Question

我一直在尝试为我的问题找到正确的答案，我知道这个问题之前已经被问过 here实际上还有很多其他地方，但我找不到适合我的问题的答案。

vue 组件

FooterNewsletter.vue

<template>
    <div class="lg:w-2/4 md:w-1/2 w-full px-8 border-l-2">
        <p class="font-bold text-3xl">
            Don't want to miss the latest cryptocurrency news?
        </p>
        <p class="py-3 text-lg">
            Get the latest news and updates by subscribing to our free
            newsletter 📰
        </p>
        <form @submit.prevent="subscribeToNewsletter">
            <div class="flex flex-col">
                <div class="flex">
                    <input
                        v-model="form.email"
                        type="text"
                        name="post_title"
                        class="
                            border-primary
                            focus:border-primary
                            focus:ring-offset-transparent
                            focus:ring-transparent
                        "
                        id="exampleFormControlInput1"
                        placeholder="Your E-mail"
                    />
                    <input
                        type="submit"
                        value="Subscribe"
                        :disabled="form.processing"
                        class="px-5 py-2 bg-primary text-white cursor-pointer"
                    />
                </div>
            </div>
        </form>
    </div>
</template>

<script>

export default {
    props: [],
    components: {

    },
    data() {
        return {
            form: this.$inertia.form({
                email: "",
            }),
        };
    },
    methods: {
        subscribeToNewsletter() {
            this.form
                .transform((data) => ({
                    ...data,
                    // remember: this.form.remember ? "on" : "",
                }))
                .post(this.route("newsletter.store"), {
                    onSuccess: (data) => {
                        console.log("data", data);
                    },
                    onError: (data) => {
                        console.log("data", data);
                    },
                });
        },
    },
};
</script>

Controller

NewsletterController.php

namespace App\Http\Controllers;

use App\Http\Requests\NewsletterStoreRequest;
use App\Models\Newsletter;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Redirect;

class NewsletterController 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()
    {
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(NewsletterStoreRequest $request)
    {
        return response()->json([
            'message' => 'suss',
        ]);
    }

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

    /**
     * Show the form for editing the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function edit($id)
    {
        //
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, $id)
    {
        //
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function destroy($id)
    {
        //
    }
}

请求文件

NewsletterStoreRequest.php

namespace App\Http\Requests;

use Illuminate\Foundation\Http\FormRequest;

class NewsletterStoreRequest extends FormRequest
{
    /**
     * Determine if the user is authorized to make this request.
     *
     * @return bool
     */
    public function authorize()
    {
        return true;
    }

    /**
     * Get the validation rules that apply to the request.
     *
     * @return array
     */
    public function rules()
    {
        return [
            'email' => ['required', 'max:150', 'email'],
        ];
    }
}

路线

web.php

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

在上面的示例中，我返回一个 json 对象，该对象不被接受并给出此错误

我尝试遵循有关响应的惯性文档 here我认为正确的答案应该在那里找到，我自己没能解决

我还研究了惯性 Jetstream 文档，但没有任何运气 here

我不想返回一个新 View ，我实际上希望它作为 ajax 请求工作，我猜回调要么给我错误，要么给我成功，而不需要重新加载页面或类似的东西。

我看到很多人都有这个问题，有谁知道出了什么问题以及我必须在 Controller 中返回什么？

Answer 1

对我来说，我必须将 Controller 更改为:

namespace App\Http\Controllers;

use Inertia\Inertia;
use App\Models\Newsletter;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Redirect;
use App\Http\Requests\NewsletterStoreRequest;

class NewsletterController 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()
    {
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(NewsletterStoreRequest $request)
    {
        Newsletter::create([
            'email' => $request->email
        ]);

        return back()->with('flash', [
            'message' => 'success',
        ]);
    }

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

    /**
     * Show the form for editing the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function edit($id)
    {
        //
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, $id)
    {
        //
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function destroy($id)
    {
        //
    }
}

这里需要注意的是这部分:

    return back()->with('flash', [
        'message' => 'success',
    ]);

我找到了一个示例，在我的 friend 的帮助下解决了我的问题:vendor/laravel/jetstream/src/Http/Controllers/Inertia/ApiTokenController.php

这里他们返回一条 Flash 消息，就像我上面的例子一样，消息键将在 props->components->flash->message 中

它不会像我想象的那样像 ajax 那样工作，因为它使用 Vue 路由，因此页面将在提交时重新加载。

我希望有人会觉得这很有用。

此外，如果因为在 vue 组件中使用数据而收到控制台错误，则必须检查包装器以检查数据是否为 ​​null，如下所示:

<ul
   v-if="assets != null"
   class="
   marketcap-rows
   border-l border-r border-gray-200
   flex flex-col
   "
   >
   <li
      v-for="asset in $props.assets.data"
      v-bind:key="asset"
      class="
      bg-white
      grid
      gap-4
      border-t border-gray-200
      "
      >
   </li>
</ul>

这就是我正在讨论的检查:v-if="assets != null"