如何使用 vue.js 在 laravel 5.7 中保存类别

Question

在 vuejs 中使用 Laravel 5.7，我试图显示 MySQL 类别 table 中的 parent_id。我想传递名称并获取所有 child 类别，而不管 parent.

我的blade

<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');
});

我的观点

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');
    });
}

类别控制器

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

从提交按钮中删除 @click。
从表单操作中删除路由...并设置它#
在表格中添加@submit="addCategory()"
在axios.post中添加没有路由功能的路由。

更新： 如果要防止页面刷新，在@submit后加上.prevent。

如何使用 vue.js 在 laravel 5.7 中保存类别

How to save category in laravel 5.7 with vue.js

vue.js

laravel-5.7