时间戳

首页 > 解决方案 > fontawesome-vue 组件图标切换无法正常工作

laravel - fontawesome-vue 组件图标切换无法正常工作

问题描述

为了更新我的 Vue 模板上的图标，我使用 npm 安装了 fortawesome/vue-fontawesome，问题是它有一个奇怪的行为：它切换一次，然后添加了第二个图标 在此处输入图像描述

这是模板代码

<th v-for="(key,i) in columns.slice(0,(columns.length-1))" class="bg-info text-white"
                    v-on:click="sortBy(key)"
                    :class="[ isActive(key) ? 'active' : '',' '+colswidth[i]]">

                    <span v-if="isActive(key)">
                    {{ cols[i] }}
                    <font-awesome-icon
                        v-if="isActive(key)"
                        :icon="sortOrders[key]==-1 ? 'sort-down': 'sort-up'">
                    </font-awesome-icon>
                    </span>
                    <span v-else>
                        {{ cols[i] }}
                    </span>

                </th>

<script>
…
isActive(key){
  if(this.sortKey == key){
    return true;
  }
  return false;
}
…
</script>

你有同样的问题，你是如何解决的？谢谢阅读。

标签： laravelvue.jsfont-awesomefont-awesome-5

解决方案

推荐阅读