laravel - 删除不适用于针对 API 的 Vue 路由

Question

我正在尝试设置一个基本系统，我可以在其中编辑和删除表中的值。一直在跟随几个指南并遇到了绊脚石。

<tbody>
<tr v-for="(product,index) in products" @key="index">
     <td>{{index+1}}</td>
     <td v-html="product.name"></td>
     <td v-model="product.units">{{product.units}}</td>
     <td v-model="product.price">{{product.price}}</td>
     <td v-model="product.price">{{product.description}}</td>
     <td><button class="btn btn-primary" @click="editingItem = product">Edit</button></td>
     <td><button class="btn btn-primary" @click="deleteProduct(product)">Delete</button></td>

然后第二个按钮调用 deleteProduct 方法，并提供要删除的产品。

    deleteProduct(product) {
        let id = product.id
        let units = product.units
        let price = product.price
        let description = product.description
        let image = product.image 
        axios.delete("/api/products/", {name, units, price, description, image})
            .then(response => this.products.shift(product))

    }

Axios 调用 ProductController 的 destroy 方法。

public function destroy(Product $product)
{
    $status = $product->delete();

    return response()->json([
        'status' => $status,
        'message' => $status ? 'Product Deleted!' : 'Error Deleting Product'
    ]);
}

最后我有 API 路由。

Route::group(['middleware' => 'auth:api'], function(){
    Route::get('/users','UserController@index');
    Route::get('users/{user}','UserController@show');
    Route::patch('users/{user}','UserController@update');
    Route::get('users/{user}/orders','UserController@showOrders');
    Route::patch('products/{product}/units/add','ProductController@updateUnits');
    Route::patch('orders/{order}/deliver','OrderController@deliverOrder');
    Route::resource('/orders', 'OrderController');
    Route::resource('/products', 'ProductController')->except(['index','show']);
});

最后一条路线是来自 ProductController 的资源，所以它应该给我所有合适的方法。使用 route:list 还向我显示所有路由都已正确设置。

当我实际尝试删除条目时会出现此问题。我得到的只是一个 405 错误，它提供了以下错误。

此路由不支持 DELETE 方法。支持的方法：GET、HEAD、POST。

但是我可以在 route:list 中清楚地看到 DELETE 方法。如果我在这里遗漏了一些明显的东西，或者我是否在做一些根本错误的事情，谁能澄清一下？

提前谢谢了！

标签： laravelvue.jsvue-router

Answer 1

 deleteProduct(product) {
    let id = product.id
    let units = product.units
    let price = product.price
    let description = product.description
    let image = product.image 
    axios.delete("/api/products/" + product.id)
       .then(response => this.products.shift(product))

 }

您在 ajax 调用中缺少产品 ID。你应该使用/api/products/{id}