删除评论功能，用vue和axios实现

1. 在Vue组件中使用v-for渲染评论列表： 在Vue组件的模板中，使用v-for指令来渲染评论列表，并绑定删除按钮的点击事件：

   <template>
     <div>
     <ul>
       <li v-for="comment in comments" :key="comment.id">
       {{ comment.text }}
       <button @click="deleteComment(comment.id)">删除</button>
       </li>
     </ul>
     </div>
   </template>
   

2. 在Vue组件的data选项中定义评论列表：

   export default {
     data() {
     return {
       comments: []
     }
     },
     // ...
   }
   

3. 在Vue组件的created生命周期钩子中调用后端接口获取评论列表： 在Vue组件的created生命周期钩子中，使用Axios调用后端接口获取评论列表，并将返回的数据赋值给comments数组：

   export default {
     data() {
     return {
       comments: []
     }
     },
     created() {
     axios.get('/api/comments')
       .then(response => {
       this.comments = response.data;
       })
       .catch(error => {
       console.error(error);
       });
     },
     // ...
   }
   

4. 在Vue组件的methods选项中定义删除评论的方法： 在Vue组件的methods选项中，定义一个方法来处理删除评论的逻辑。在该方法中，使用Axios调用后端接口删除评论，并在成功删除后更新comments数组：

   export default {
     data() {
     return {
       comments: []
     }
     },
     created() {
     // ...
     },
     methods: {
     deleteComment(commentId) {
       axios.delete(`/api/comments/${commentId}`)
       .then(response => {
         // 在成功删除评论后，更新comments数组
         this.comments = this.comments.filter(comment => comment.id !== commentId);
       })
       .catch(error => {
         console.error(error);
       });
     }
     }
   }
   

   重点知识v-for的运用和数组的一些方法