新添加的帖子采用 vue.js/laravel 项目中之前帖子的点赞数和评论数

Question

我目前正在学习 vue.js。但是，我很难尝试在我正在做的项目上调试错误，这是一个类似博客的应用程序，以 Laravel 作为后端。 在我的 home Blade.file 中，我有一个名为 <timeline> 的根组件，其中我有 textarea 来添加帖子，然后是一个名为 <posts> 的组件。在 <posts> 内部，我有 <post> 组件，其中显示了各个帖子的详细信息。 我还有一个组件 <feedback> 用于喜欢和评论计数，所有这些都运行良好。 但是，我的挑战是，每次我添加新帖子时，新帖子都会继承反馈，而不是喜欢计数和评论计数为 0 上一篇文章的。（假设上一篇文章有​​ 10 个赞和 5 个 cmets，一旦我进入一个新帖子，它会立即显示 10 个赞和 5 个评论计数，而不是自新帖子以来的 0，并且还没有）。上一篇文章依次接受前一篇文章的反馈，依此类推。 请问我该如何纠正这个错误？ 我的组件如下图：

//Timeline component
<template>
    <div class="timeline">
        <div class="form-group">
            <textarea name="body" class="form-control" v-model="postText" rows="4" placeholder="What's on your mind"></textarea>
        </div>
        <div class="form-group">
            <button type="button" class="btn btn-primary" @click.prevent="sendPost">Post</button>
        </div>
        <hr>
        <posts :posts="posts"></posts>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                postText: '',
                posts: []
            }
        },
        methods: {
            loadPost(){
                axios.get('/post').then(response => {
                    console.log(response.data);
                    this.posts = response.data;
                })
            },
            sendPost(){
                if(!this.postText || this.postText.trim() === ''){
                return;
             }

             //send to db
             axios.post('/post', {
                body: this.postText.trim()
             }).then(response=> {
                console.log(response);
                this.loadPost();
             });
             this.postText = '';
            }
        },
        mounted(){
            this.loadPost();
        }
    }
</script>

//posts component
<template>
    <div class="posts">
        <div v-for="post in posts">
            <post :post="post"></post>
        </div>
    </div>
</template>

<script>
    export default {
        props: ['posts']
    }
</script>

这是我的帖子组件

<template>
    <div class="post">
        <div class="media">
            <a class="pull-left" href="#">
                <img :src="'/images/profile_pix/avatar.png'" class="media-object center-block" alt="#"/>
            </a>
            <div class="media-body">
                <h5><strong> {{ post.user.username }}</strong></h5>
                <small>{{ post.created_at }}</small>
                  <p>{{ post.body }} </p>
                <feedback :post="post"></feedback>
            </div>
        </div><hr>
      </div>
</template>

<script>
    export default {
        props: ['post']
    }
</script>

这是我的反馈组件

<template>
    <div class="feedback">
        <span v-if="liked"><a href="#" @click.prevent="unLikeApost"><i class="fa fa-thumbs-down"></i>Unlike</a></span>
        <span v-else="liked"><a href="#" @click.prevent="likeApost"><i class="fa fa-thumbs-up"></i>Like</a></span>
        <span><small> {{likes}} </small></span>                        
        <span>
          <a href="#"><i class="fa fa-comment"></i></a>&nbsp <small> {{ comments }} </small>
        </span>
        <span v-if="author">
          <a href="#" v-if="author" class="pull-right"><small>Delete</small></a>
        </span> 
    </div>
</template>

<script>
    export default {
      props: ['post'],
      data(){
        return {
          author: false,
          likes: '',
          liked: false,
          comments: ''
        } 
      },
      methods: {
        getLikes(){
          axios.get('/likes/'+this.post.id+'/getlikes').then((response) => {
            if(response.data === 0){
              this.likes = 0;
            }
            this.likes = response.data;
          })
        },
        checkIfLiked(){
          axios.get('/likes/'+ this.post.id +'/checkliked').then((response) => {
            if(response.data === 1){
              this.liked = true;
            }
          })
        },
        likeApost(){
            axios.post('/likes/'+ this.post.id +'/likeapost').then((response) => {
              console.log(response.data);
              this.likes += 1;
              this.liked = true;
            })
        },
        unLikeApost(){
            axios.post('/likes/'+ this.post.id +'/unlikeapost').then((response) => {
              console.log(response.data);
              this.likes -= 1;
              this.liked = false;
            })
        },
        countComments(){
          axios.get('/post/'+ this.post.id +'/countcomments').then((response) => {
            this.comments = response.data;
          })
        }
      },
      mounted() {
        // determine author
        axios.get('/post/' +this.post.id+'/getposter').then((response) => {
          let auth_user = window.Laravel.user.id;
          let author = response.data;
          if (auth_user === author){
            this.author = true;
          }
        });

        this.getLikes();

        this.checkIfLiked();

        this.countComments();
      }
    }
</script>

Answer 1

您在提交新帖子后发出 GET /post 而不是 GET /post/:id，这对我来说有点奇怪。或者只是将创建的响应添加到您现有的数组中。

/edit 忽略以上内容，我看到您只是重新运行获取所有帖子的方法。单数的帖子在那里令人困惑，也许应该是 /posts :)

问题可能与key on v-for有关，请尝试使用您那里的帖子ID。