更改 Nativescript Vue 中的 Fontawesome 图标

Question

我正在创建一个投票系统。对于赞成票和反对票，我使用相同的组件 - 投票按钮。激活按钮时，如何更改图标("fa-thumbs-o-up"到"fa-thumbs-up"和"fa-thumbs-o-down"到"fa-thumbs-down"(？哪个是最好的选择 - 通过 CSS(：before(，vue.js逻辑( IF 或其他东西(，通过 JS 或其他东西替换字符串？

父组件：

<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>

父组件 CSS：

.upvote.active {
background: orangered;
color: white;
}
.downvote.active {
background: blue;
color: white;
}

投票按钮子组件：

<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

您可以使用 javascript 中的计数器来跟踪按钮是否应该根据按钮被按下的次数显示赞成票或反对票。

例：

目录：

<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

谢谢！我这样做的方式如下：

父母：

<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)" />

投票按钮组件：

<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>