I am building a Q&A website much like stackoverflow, where you can vote a question or answer. To simplify I kept the code for voting up.
This is the vote component is used on both question and answer components.
<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>
This is the question component that uses vote component:
<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>
This is the answer component that uses vote component:
<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>
THE ISSUE
Voting up works fine and changes the state of both question.votes and answer.votes, but it only renders the HTML of answers. I have to refresh to see the upvote on question. Also in Vue developper tool console, answer.votes get refreshed automatically while I need to hit the vue refresh button to see question.votes taking the new vote into account (but still no HTML rendering).
IMPORTANT NOTE
As you can see, you can also comment on question and answer, and this is working fine on both because I used a different approach to $emit an event. Maybe this is a solution to my answer, but what I really want to know is why the functionnality in vote is working on answer and not on question.
Thanks!
props. Like invotecomponent -this.votes.push.warnfrom Vue in console.