在 Nativescript Vue 中更改 Fontawesome 图标

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>