在 Vue 组件中删除后不重新加载页面

Question

我有一个 vue 组件来删除项目。函数工作 fine.but 删除的项目一直保留在页面上，直到我在网络浏览器中按下重新加载。下面是vue组件中的delete方法

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

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

-删除按钮

<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>

点击删除按钮后，有没有办法删除已删除的项目。

Answer 1

据我了解，您将所有项目远程存储在其他地方的服务器上，并且您获取项目的方式是通过其他一些请求。而你在这里做的是删除服务器上的项目而不做任何其他事情。

我不知道网络应用程序如何知道该项目已被删除。通常我在从 api.

收到 200 后通过在本地删除对象来解决这种情况

如果您想要更简单的东西，您可以在收到任何类型的回复后刷新项目列表。这完全取决于你想要什么样的功能。

Answer 2

请确认以下几点：

您的 api 回复成功了吗？
您是否在数据函数中声明了 isDelete 属性？

你应该在 ajax 完成使用 promise 或 async/await 之后更改 isDelete 属性因为 ajax 最多是异步的 time.And 你应该声明数据函数中的 isDelete 属性是这样的：

data () {
   return { isDelete: true }
}

因为它使 Vue 能够收集依赖关系并使其响应。

Answer 3

一旦我在响应到来后重新加载页面，它就会重新加载页面并删除已删除的项目。解决方法如下

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

在 Vue 组件中删除后不重新加载页面

Not reloading the page after delete in Vue component

vue.js

vue-component