Vuejs：组件聚合

Question

从以下简单书签交易状例如开始：https://jsfiddle.net/coligo/g7mu5ndz/

Vue.component('post', { 
    template: "#post-template", 
    props: ['post'], 
    data: function() { 
    return { 
     upvoted: false, 
     downvoted: false 
    }; 
    }, 
    methods: { 
    upvote: function() { 
     this.upvoted = !this.upvoted; 
     this.downvoted = false; 
    }, 
    downvote: function() { 
     this.downvoted = !this.downvoted; 
     this.upvoted = false; 
    } 
    }, 
    computed: { 
    votes: function() { 
     if (this.upvoted) { 
     return this.post.votes + 1; 
     } else if (this.downvoted) { 
     return this.post.votes - 1; 
     } else { 
     return this.post.votes; 
     } 
    } 
    } 
}); 

var vm = new Vue({ 
    el: "#app", 
    data: { 
    posts: [{ 
     title: "A post for our reddit demo starting at 15 votes", 
     votes: 15 
     }, 
     { 
     title: "Try out the upvoting, it works, I promise", 
     votes: 53 
     }, 
     { 
     title: "coligo is the bomb!", 
     votes: 10 
     }] 
    } 
}); 

我想：

• 一个）显示upvotes的总数（列表下的帖子，在#APP DIV
• b）对于每一个职位，显示它已获得

总upvotes的百分比

这可能没有管理父级中的每个发布状态吗？

Answer 1

有太多的重构需要做的代码，这是不能在这里解释。因此，这里是working fiddle

我只是指出了重要变化：

• 你加入和组件上减去票，但要通过道具获取数据，所以你应该更新由父发出一个事件。相关链接：custom events，props are one-way

• 您可以使用一个计算的属性来计算总票数在父的屁股现在upvotes和downvotes是存在于父

• 通过总票数从父母到主数据进行更改子组件作为道具来计算百分比票

  Vue.component('post', { 
      template: "#post-template", 
      props: ['post', 'total'], 
      data: function() { 
      return { 
       upvoted: false, 
       downvoted: false, 
  
      }; 
      }, 
      computed:{ 
       percentVotes(){ 
       return (this.post.votes/this.total * 100).toFixed(2) 
       } 
      }, 
      methods: { 
      upvote: function() { 
       if(!this.upvoted){ 
        this.upvoted = true; 
        this.downvoted = false; 
        this.$emit('upvoted'); 
       } 
  
      }, 
      downvote: function() { 
       if(!this.downvoted){ 
        this.downvoted = true; 
        this.upvoted = false; 
        this.$emit('downvoted'); 
       } 
      } 
      } 
  }); 
  
  var vm = new Vue({ 
      el: "#app", 
      data: { 
      posts: [{ 
         title: "A post for our reddit demo starting at 15 votes", 
         votes: 15 
        }, 
        { 
         title: "Try out the upvoting, it works, I promise", 
         votes: 53 
        }, 
        { 
         title: "coligo is the bomb!", 
         votes: 10 
        }] 
      }, 
      methods: { 
       upvoted(post){ 
        post.votes = post.votes +1; 
       }, 
       downvoted(post){ 
        post.votes = post.votes - 1; 
       } 
      }, 
      computed:{ 
       totalVotes(){ 
       var postVotes = this.posts.map((post) => { 
         return post.votes; 
        }); 
  
        var getTotal = function (total, num) { 
        return total + num; 
       } 
       return postVotes.reduce(getTotal); 
       } 
      } 
  });