Удалить, не работающий для маршрута Vue против API

#laravel #vue.js #vue-router

#laravel #vue.js #vue-маршрутизатор

Вопрос:

Я пытаюсь настроить базовую систему, в которой я могу редактировать и удалять значения из таблицы. Следовал нескольким руководствам и наткнулся на камень преткновения.

 <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 выполняет вызов метода destroy ProductController.

 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, которая выдает следующую ошибку.

Метод УДАЛЕНИЯ не поддерживается для этого маршрута. Поддерживаемые методы: GET, HEAD, POST.

Однако я могу четко видеть метод УДАЛЕНИЯ в route:list. Кто-нибудь мог бы просто уточнить, не упускаю ли я здесь чего-то очевидного, или я делаю что-то в корне неправильное?

Заранее большое спасибо!

Ответ №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 отсутствует идентификатор продукта. Вы должны использовать /api/products/{id}

Комментарии:

1. Это работает отлично, спасибо!! Для моего addProduct я использую тот же синтаксис в моем вызове ajax. axios.post(«/api/products/», {название, единицы измерения, цена, описание, изображение}) .затем (ответ => this.products.push(продукт)) Нужно ли также изменить это? Как я заметил, на самом деле это не создает новую запись в базе данных.

2. вы должны написать, что вы публикуете в axios.post(‘/api /products’, {name: ‘BMW X6’})

3. Я имею в виду значение ключа