Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<template>
<div>
<span v-if="selectedReaction === 'agree'">
You and {{ agree }} others disagree to this
</span>
<span v-else-if="selectedReaction === 'disagree'">
You and {{disagree}} others disagree to this
</span>
</div>
</template>
<script>
export default {
name: 'review-reactions',
props: ['agree', 'disagree', 'id', 'reaction'],
data() {
return {
display: 'none'
}
},
computed: {
/**
* Display the user selected reaction.
* @note The `reaction` prop overrides any `react` event for this component.
*/
selectedReaction() {
if (!this.reaction) {
return this.display;
}
return this.reaction;
}
},
methods: {
/**
* Handle a reaction event.
*
* @note You'd trigger this using window.vue.$emit('react', {YourPostId}, {ReactionType})
* @param postId // This would be your post ID
* @param {'agree'|'disagree'} type
*/
handleReaction(postId, type) {
if (this.id !== postId) {
return;
}
this.display = type;
}
},
created() {
window.event.$on('react', this.handleReaction)
}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.