针对 API 删除不适用于 Vue Route

Question

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

<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 的资源，所以它应该给我所有 suitable 方法。使用 route:list 还向我显示所有路由都已正确设置。

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

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

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

非常感谢！

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}

针对 API 删除不适用于 Vue Route

Delete not working for Vue Route against API

laravel

vue.js

vue-router