Question

我的Home.vue文件：

<template>
    <div>
        <my-post
            v-for="(post, index) in posts"
            :post="post"
            :index="index"
            :key="post.id"
        ></my-post>
    </div>
</template>

<script>
    import Post from './Post.vue';

    export default {
        data() {
            return {
                posts: []
            }
        },
        mounted() {
            axios.get('http://localhost/mine/test')
                .then(response => {
                    this.posts = response.data.posts;
                })
                .catch(error => {
                    // console.log(error);
                })
        },
        components: {'my-post': Post}
    }
</script>

我的Post.vue文件：

<template>
    <div class="post">
        <!-- The content of the post...
        I want to count the number of likes for each post here something like this:
        <p>{{likes.length}}</p> -->
    </div>
</template>

<script>
    export default {
        props: ['post'],
        data() {
            return {}
        }
    }
</script>

由axios.get('http://localhost/mine/test')获取的数据如下：

posts: Array [
    {0:first_name:'example123',post_id:1},
    {1:first_name:'example456',post_id:2},
    {2:first_name:'example789',post_id:3},
],
likes: Array [
    {0:first_name:'example1',post_id:1},
    {1:first_name:'example2',post_id:1},
    {2:first_name:'example3',post_id:1},
]

请注意，它们是分开的。喜欢不是帖子的孩子。

我将道具中的喜欢设置为帖子，但问题是它显示的喜欢数量完全相同。

我如何获得每个帖子的点赞次数？

谢谢

Answer 1

理想情况下，您需要更新架构，以便每个帖子都有一个likes对象分别定义它们。
如果无法实现，则可以通过执行此操作来修改代码。

添加一个具有所有顶数的likes字段。

export default {
    data() {
        return {
            posts: [],
            likes:0
        }
    },
    mounted() {
      axios.get('http://localhost/mine/test')
      .then(response => {
         this.posts = response.data.posts;
         this.likes = response.data.likes;
       })
       .catch(error => {
         // console.log(error);
      })
    },
   components: {'my-post': Post}
}

使用过滤器添加/传递[likes]道具，并赋予每个帖子特定的赞。

<my-post
   v-for="(post, index) in posts"
   :post="post"
   :likes="likes.filter(x => x.post_id==post.post_id)"
   :index="index"
   :key="post.id">
</my-post>

代码片段

function callMe() {
  var post = Vue.component("post", {
    template: "<p>PostId={{post.post_id}} . Number of likes: {{likes.length}}</p>",
    props: {
        likes: Array,
        post: Object
    },
    data() {
       return{
         numberOfLikes:0
       }
    },
    methods: {
       
    }

  })
  var vm = new Vue({
    el: '#app',
    template: '<p><post v-for="(postObj,index) in post.posts"  :post="postObj" :likes="post.likes.filter(x => x.post_id==postObj.post_id)"></post></p>',
    data(){
      return {
        likes:0,
        post:{
         posts: [
         {first_name:'example123',post_id:1},
         {first_name:'example456',post_id:2},
         {first_name:'example789',post_id:3},
         ],
         likes: [
         {first_name:'example1',post_id:1},
         {first_name:'example2',post_id:1},
         {first_name:'example3',post_id:1},
         {first_name:'example4',post_id:2},
        ]
       }
      }
    }
  })
}
callMe();

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js" type="text/javascript"></script>

<div id="app">				

</div>

Answer 2

首先，您应该在数据库模式中添加一个“ like_count”（或您想要的任何内容）。我假设您正在使用某种REST服务，该服务支持基本的http方法，例如GET，POST，PUT，DELETE。

然后只需在您的post组件中执行一个简单的api调用即可。

<template>
    <div class="post">

       <!-- Whatever you wish to stylize -->
       <button class="add-like" @click="addLike"> +1 </button>
       <p>{{currentLikes}}</p>
    </div>
</template>

<script>
    export default {
        props: ['post'],
        computed: {
            currentLikes () {
                return parseInt(this.post.like_count) + 1  
            }
        },
        methods: {
            addLike () {
                axios.put('/yourlink/' + this.post.post_id, {
                   like_count: this.currentLikes
                })
            }
        }
    }
</script>

vuejs-如何显示每个帖子的点赞次数

2 个答案: