Search code examples
laravelvue.jsfetch

Delete a post with Vue + Laravel + Fetch

Hi I am trying to delete a post but it is not working at all, when I check the url in the browser it displays a blank page:

So my api route in Laravel is:

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

My HTML code which it's inside a component:

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

The vue code is:

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

When I click:

It displays a blank page if I do that by URL but the console shows:

Error: SyntaxError: Unexpected end of JSON input

what could it be?

Solution

  • What it worked.. it was this:

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