Javascript Vue.js 2.0在一个项目上呈现相同的组件，但在另一个项目上呈现不同的组件

我正在建立一个类似stackoverflow的问答网站，在那里你可以

投票

a

问题

或

回答

。为了简化，我保留了投票代码

这是

投票

组件，用于

问题

和

答案

组件

<template>
  <div class="vote">
    <h4 @click="voteUp">
      <i :class="{'fa fa-chevron-circle-up' : votedUp>-1, 'fa fa-chevron-up': votedUp==-1 }"></i>
    </h4>
  </div>
</template>

<script>
  export default {
    props: ['votes','item'],
    computed:{
      votedUp() {
        return _.findIndex(this.votes, {user_id: this.$root.authuser.id});
      }
    },
    methods:{
      voteUp() {
        axios.post(this.$root.baseUrl+'/vote_item', {item_id:this.item.id,item_model:this.item.model,vote:'up'})
             .then(response => {
                _.isEmpty(response.data) ? this.votes.splice(this.votedUp,1) : this.votes.push(response.data);
              })
      }
    }
  }
</script>

这是使用

投票的
答案
组件：

<template>
  <div class="question">
    <h1>{{ question.title }}</h1>
    <div class="row">
      <div class="col-xs-1">
        <vote :votes="question.votes" :item="item"></vote>
      </div>
      <div class="col-xs-11 pb-15">
        <p>{{ question.body }}</p>
        <comment-list :comments="question.comments" :item="item" ></comment-list>
      </div>
    </div>
    <answer v-for="answer in question.answers" :answer="answer"></answer>
  </div>
</template>

<script>
  export default {
    props: ['question'],
    data(){
      return {
        item:{ id:this.question.id, model:'Question' }
      };
    }
  }
</script>

<template>
  <div class="answer row">
    <div class="col-xs-1 mt-20">
      <vote :votes="answer.votes" :item="item"></vote>
    </div>
    <div class="col-xs-11">
      <h3>{{ answer.title }}</h3>
      <p>{{ answer.body }}</p>
      <comment-list :comments="answer.comments" :item="item" ></comment-list>
    </div>
  </div>
</template>

<script>
  export default {
    props: ['answer'],
    data(){
      return {
        item:{ id:this.answer.id, model:'Answer' }
      };
    }
  }
</script>


{{answer.title}
{{answer.body}

导出默认值{
道具：[“答案”]，
数据（）{
返回{
项：{id:this.answer.id，模型：'answer'}
};
}
}

问题

向上投票可以很好地改变
问题.投票
和
答案.投票
，但它只呈现
答案
的HTML。我必须刷新才能看到关于
问题的投票结果。同样在Vue开发工具控制台中，
answer.voces
自动刷新，同时我需要点击Vue刷新按钮查看
question.voces
，并考虑新的投票（但仍然没有HTML呈现）

重要提示

如您所见，您还可以对
问题
和
答案
发表
评论
，这两种方法都很好，因为我对
$emit
事件使用了不同的方法。也许这是我的答案的一个解决方案，但我真正想知道的是，
投票
中的功能性为什么是针对
答案
，而不是针对
问题
。
谢谢
 您的
投票
组件不应变异
道具
。更改本地副本：

export default {
  props: ['votes','item'],
  data() {
    return { votesCopy: [] };
  },
  mounted() {
    this.votesCopy = this.votes.slice();
  },
  computed:{
    votedUp() {
      return _.findIndex(this.votesCopy, {user_id: this.$root.authuser.id});
    }
  },
  methods:{
    voteUp() {
      axios.post(this.$root.baseUrl+'/vote_item', {item_id:this.item.id,item_model:this.item.model,vote:'up'})
           .then(response => {
              _.isEmpty(response.data)
                ? this.votesCopy.splice(this.votedUp,1)
                : this.votesCopy.push(response.data);
            })
    }
  }
}

在开发模式中没有使用Vue吗？你不应该改变/变异
道具
。就像在
vote
component-
this.votes.push中一样。是的，我正在开发模式下使用Vue。您建议我怎么做呢？然后您应该在控制台中的Vue中有一个
警告
。它可以工作，谢谢。但是我仍然不明白为什么这个组件不应该改变道具。你能解释一下吗？在更改道具更有效的情况下，为什么我要复制内存并增加内存负担？我想这比我能解释的更好。保持所有内容同步的正确方法似乎是发送事件以更改父对象的状态。您的解决方案可以工作，并且代码更友好（所有投票逻辑都保留在投票组件中），但会在父状态和子状态之间创建非同步状态。谢谢分享。最后一个问题：你为什么在mounted（）中分割选票？我用data（）{return{votesCopy:this.voces；}}试过了，效果很好，好吧。这是我创建阵列副本的方法。