implement the addition, deletion, modification and query of a personal blog. The content of the blog is requested by axios when the page is created, and the data of the axios.delete, backend is also changed when it is deleted. However, the data rendered by the list does not change accordingly, and the page needs to be refreshed manually.
part of the code is as follows:
<ul>
<router-link
v-for="blog in blogs"
:key="blog.id"
class="singleArticle"
tag="li"
:to=""/blog/"+blog.id"
@click.native="handleBlogClick(blog)"
>
<h2>{{blog.blogTitle}}</h2>
<div>
<span>:{{blog.classify.toString()}}</span>
<span>:{{blog.type}}</span>
</div>
{{blog.blogContent}}
<div class="handleBlog">
<router-link :to=""/editBlog/"+blog.id" class="handleOption" @click="handleEdit"></router-link>
<router-link to="/articleList"
@click.native="handleDelete(blog.id)" class="handleOption"></router-link>
</div>
</router-link>
</ul> methods: {
handleBlogClick(blog) {
this.$store.dispatch("changePresentBlog",blog);
},
getData() {
axios.get("http://localhost:3000/article")
.then((data) => {
this.blogs = data.data.reverse();
})
},
handleDelete(id) {
axios.delete("http://localhost:3000/article/"+id)
.then(() => {
console.log("");
})
this.getData();
}
},
created() {
this.getData();
}when the first piece of data is deleted, the console shows that the deletion is successful, and the background data is also deleted successfully
but the view has not been updated. What is the reason?
do you have any good suggestions for achieving this effect? Xiaobai asks for help