Not reloading the page after delete in Vue component

user_14822825 0
Viewed 1474

I have a vue component to delete items. function working fine.but that deleted items is remain the page until I press the reload in web browser. Following is the delete method in vue component.

deletedItem: function () {
            let data = {
                "_method" : 'delete',
            }

            axios.post('/delete-item' +this.id, data);
            this.isDelete =false;
            location.reload();
        }

-Delete button

<button  v-on:click="deletedItem" class="bg-red-500 text-gray-200 rounded hover:bg-red-400 px-6 py-2 focus:outline-none mx-1"> Delete</button>

Is there are anyway to remove deleted item once I click delete button.

vue-component vue.js
3 Answers

Once I reload the page after the response came then it reload the page & remove deleted item. solution is as follows.

axios.post('/delete-item' +this.id, data).then( response => {
    this.isDelete =false
    location.reload()
    });
user_148228250

As i understand it you have all the items stored remotely on a server somewhere else, and the way you fetch the items is by some other request. And what you are doing here is deleting the item on the server without doing anything else.

I don't see how the web-application would know that the item got deleted. Normally I solve this situation with deleting the object locally after i receive a 200 from the api.

If you want something even more simple you could just refresh the list of items after you receive a response of any kind. It all depends on what kind of features you want to have.

user_143147700

Please confirm the points below:

  1. Did your api responded with a successful response?
  2. Did you declare isDelete property in data function?

You should change the isDelete property after the ajax finished using promise or async/await because ajax is asynchoronous at the most time.And you should declare the isDelete property in data function like this:

data () {
   return { isDelete: true }
}

because it makes Vue be able to collect the dependency relation and make it responsive.

user_78113890
Related