Как сохранить категорию в laravel 5.7 с помощью vue.js

Question

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

Мой клинок

<form action="{{ route('categories.store') }}" method="post">
    @csrf
    <div class="form-group">
        <label for="name">name:</label>
        <input type="text" id="name" class="form-control" v-model="name">
    </div>
    <div class="form-group">
        <label for="sub_category">category</label>
        <select id="sub_category" v-model="parent_id" class="form-control">
            <option data-display="main category" value="0">main category</option>
            <option v-for="category in categories" :value="category.id">@{{ category.name }}</option>
        </select>
    </div>
    <div class="form-group">
        <button type="button" @click="addCategory()"  class="btn btn-info">save</button>
    </div>
</form>

web.php

Route::group(['namespace' => 'Admin', 'prefix' => 'admin'],function (){
    $this->get('panel', 'PanelController@index')->name('panel.index');
    $this->resource('categories', 'CategoryController');
});

Мое vue

addCategory: function () {
    axios.post(route('categories.store'), {
        name: this.name,
        parent_id: this.parent_id,
    }).then(response => {
        this.categories.push({'name': response.data.name, 'id': response.data.id});
    }, response => {
        this.error = 1;
        console.log('Errors');
    });
}

CategoryController

public function store(Request $request)
{
    $category = new Category();
    $category->name = $request->name;
    $category->parent_id = $request->parent_id;
    if ($category->save()) {
        return $category;
    }
}

Я вижу эту ошибку в консоли для первого

Слишком

И я получаю ошибку 405.

Answer 1

1. Удалить @click из кнопки отправки.
2. Удалить маршрут ... из действия формы и установить его #
3. Добавить @submit="addCategory()" в форму
4. В выборку axios.post добавьте маршрут без функции маршрута.

Обновление: Если вы хотите запретить обновление страницы, добавьте .prevent после @submit.