Question

在类似博客的Vue.js应用中，帖子以v-for循环的形式呈现。单击每个帖子下的按钮时，将从服务器获取其评论并按如下方式进行属性分配，因为post对象没有comments属性：

  `this.$set(post, 'comments', res.data.comments) ;`

呈现评论的代码是这样的：

<div v-for="(c, j) in post.comments" :key="j">                           
    <span>{{c.body}}</span> 
    <span v-if="post.user_id==userId" @click="delComment(c, post)">Delete me!</span>
</div>

以及删除方法：

  delComment(c, post) {
    const payload = {
           token: this.token,
           cid: c.id
      }
    axios.delete(this.BASE_URL + "/api/comment", { data: payload } )
    .then( (res)=> {       
      post.comments = this.post.comments.filter((comment)=>{
         return comment.id != c.id
      });      
      this.$set(post, 'comments', post.comments) ;
    })
    .catch( error => {  
      console.log(error);
    });
  },

但是当我单击Delete链接时，在控制台中出现此错误：

TypeError: Cannot read property 'comments' of undefined
    at eval (Home.vue?76f2:540)

我该如何解决？

Answer 1

您在this之前缺少post：

 //v-------------//here
  this.post.comments = this.post.comments.filter((comment)=>{
     return comment.id != c.id
  });

在这里：

      //----------v--------------------v
      this.$set(this.post, 'comments', this.post.comments) ;

更新：

我假设您在数据对象中有一个称为post的属性，如下所示：

  data(){
     return{
        post:[]
       ...
        }
   }

因此，在这种情况下，您应删除this变量之前的所有post。

Answer 2

好的，我意识到，罪魁祸首是this中额外的this.post.comments.filter((comment)。

工作代码是这样的：

delComment(c, post) {
    const payload = {
           token: this.token,
           cid: c.id
      }
    axios.delete(this.BASE_URL + "/api/comment", { data: payload } )
    .then( (res)=> {       
      post.comments = post.comments.filter((comment)=>{
         return comment.id != c.id
      });      
      this.$set(post, 'comments', post.comments) ;
    })
    .catch( error => {  
      console.log(error);
    });
  },

感谢大家分享您的想法！

无法在Vue.js中被动删除帖子的评论

2 个答案: