删除针对API的Vue Route不起作用

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方法。谁能澄清我是否在这里遗漏了一些明显的东西，或者我做的是根本上错误的事情？

非常感谢！

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}