Laravel 8 Jetstream Inertia Все запросы Inertia должны получать действительный ответ Inertia

Я пытался найти правильный ответ на свою проблему. Я знаю, что вопрос был задан до здесь и на самом деле во многих других местах, но никакие найденные мной ответы не могут удовлетворить мою проблему.

Компонент 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>

Контроллер

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, который не принимается и дает мне эту ошибку введите описание изображения здесь

Я пробовал следовать документации по инерции об ответах здесь Я думаю, что правильный ответ можно найти там, я не смог решить это самостоятельно

Я также безуспешно просмотрел документы inertia Jetstream здесь

Я не хочу возвращать новое представление, я действительно хочу, чтобы он работал как запрос ajax. Я предполагаю, что обратный вызов либо дает мне ошибку, либо успех без перезагрузки страницы или чего-то в этом роде.

Я вижу, что у многих есть эта проблема, кто-нибудь знает, что не так и что мне нужно вернуть в контроллере?


person ii iml0sto1    schedule 10.07.2021    source источник


Ответы (1)


Для меня мне пришлось изменить контроллер на это:

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',
    ]);

Я нашел образец, в котором моя проблема была решена с помощью моего друга в: vendor/laravel/jetstream/src/Http/Controllers/Inertia/ApiTokenController.php

Здесь они возвращаются с флэш-сообщением, как в моем примере выше, ключ сообщения будет в props- ›components-› flash- ›message.

введите описание изображения здесь

Это не будет работать, как я думал, как ajax, потому что он использует маршруты Vue, поэтому страница перезагружается при отправке.

Надеюсь, кому-то это пригодится.

Также, если вы получаете консольную ошибку из-за того, что вы используете данные в компоненте vue, вам необходимо проверить оболочку, чтобы проверить, являются ли данные нулевыми, например:

<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"

person ii iml0sto1    schedule 10.07.2021