Change Fontawesome icon in Nativescript Vue - css

Question

I'm creating a voting system. For both positive and negative votes, i use the same component - VoteButton. How to change the icon ( 'fa-thumbs-o-up' to 'fa-thumbs-up' and 'fa-thumbs-o-down' to 'fa-thumbs-down') when the button is activated? Which is the best option - via CSS (:before), vue.js logic ( IF or something), replace string via JS or something else?
Parent component:
<GridLayout columns="auto,*">
<VoteButton col="0" :buttontext=" 'fa-thumbs-o-up' | fonticon" :votes="upVotes" label="Upvote" :active="upvoted" width="33%" #click="vote(1)" />
<VoteButton col="1" :buttontext=" 'fa-thumbs-o-down' | fonticon" :votes="downVotes" label="Downvote" :active="downvoted" width="33%" #click="vote(-1)" />
</GridLayout>
Parent component CSS:
.upvote.active {
background: orangered;
color: white;
}
.downvote.active {
background: blue;
color: white;
}
VoteButton child component:
<template>
<button #tap="$emit('click')" :class="[buttonClass, { active }]">
<FormattedString>
<Span class="fa" > {{ buttontext }}</Span>
<Span> {{ votes }}</Span>
</FormattedString>
</button>
</template>
<script>
export default {
props: {
active: Boolean,
label: String,
buttontext: String,
votes: Number
},
computed: {
buttonClass() {
return this.label.toLowerCase();
}
}
};
</script>

Answer 1

You could use a counter in javascript to keep track of whether the button should be displaying an upvote or a downvote based on the number of times the button is pressed.
Example:
Html:
<button onclick="myFunction()">Try it</button>
<div id="myDIV">
This is a DIV element.
</div>
CSS:
<style>
.mystyle {
background: orangered;
color: white;
}
.mystyle2 {
background: blue;
color: white;
}
</style>
Javascript:
<script>
var x = 0;
function myFunction() {
var element = document.getElementById("myDIV");
if (x % 2 == 0){
element.classList.add("mystyle");
element.classList.remove("mystyle2");
x++;
}
else {
element.classList.add("mystyle2");
element.classList.remove("mystyle");
x++;
}
}
</script>

Answer 2

Thanks! I did it the following way:
Parent:
<VoteButton col="0" noactivefatext='fa-thumbs-o-up' activefatext='fa-thumbs-up' :votes="upVotes" label="Upvote" :active="upvoted" #click="vote(1)" />
<VoteButton col="1" noactivefatext='fa-thumbs-o-down' activefatext='fa-thumbs-down' :votes="downVotes" label="Downvote" :active="downvoted" #click="vote(-1)" />
VoteButton component:
<template>
<button #tap="$emit('click')" :class="[buttonClass, { active }]">
<FormattedString>
<Span class="fa body" :text="active ? activefatext : noactivefatext | fonticon" ></Span>
<Span> {{ votes }}</Span>
</FormattedString>
</button>
</template>