Удалить сообщение с помощью Vue Laravel Fetch

#laravel #vue.js #fetch

#laravel #vue.js #извлечение

Вопрос:

Привет, я пытаюсь удалить сообщение, но оно вообще не работает, когда я проверяю URL-адрес в браузере, он отображает пустую страницу:

Итак, мой маршрут api в Laravel:

 Route::resource('/bank', 'BankController');
  

Мой HTML-код, который находится внутри компонента:

 <button v-on:click="deletePost(post.bank_id)" class="btn btn-danger btn-circle btn-sm">
  <i class="fas fa-trash"></i>
</button>
  

Код vue:

 methods: {
    deletePost: function (id) {
        fetch('/api/bank/'  id)
        .then(res => res.json())
        .catch(error => console.error('Error:', error))
        .then(response => console.log('Success:', response));
    }
 },
  

Когда я нажимаю:

Он отображает пустую страницу, если я делаю это по URL, но консоль показывает:

Ошибка: ошибка синтаксиса: неожиданное завершение ввода JSON

что это может быть?

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

1. кажется, ваш API не возвращает правильный JSON

2. @MuhammadDyasYaskur все ли правильно?

3. Вы должны вызвать api с DELETE помощью метода.

4. Но @ElektaKode в Laravel это метод удаления для api

5. Опубликовать код контроллера.

Ответ №1:

Вы должны изменить метод запроса на УДАЛЕНИЕ при использовании ресурса.

В случае, если fetch не поддерживает метод удаления, попробуйте этот трюк с подменой:

 fetch('/api/bank/'  id   '?_method=delete')
  

Более того, я рекомендую вам использовать axios в vuejs вместо fetch .

Ответ №2:

Что это сработало.. это было так:

 fetch('/api/bank/'   id,  {
  method: 'DELETE'
})