0

in order to update my icons on my Vue template I installed fortawesome/vue-fontawesome with npm, the problem is that it has a strange behavior: it' toggling one time and after it adds a second icon enter image description here

Here is the template code

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

Did you had the same problem, and how did you resolve it ? Thanks for reading.

Eloise85
  • 648
  • 1
  • 6
  • 26
  • Are your example code part of an `v-for`? Because of the `:key`. And `key` vs. `:key` could lead to this error. Please provide more code because I have no problems with this package. – RWAM Nov 07 '18 at 11:25
  • Even without same problem... Ok I add more code, thanks. – Eloise85 Nov 07 '18 at 11:39
  • Sorry, but I'm unable to reproduce this behavior. – RWAM Nov 07 '18 at 14:18
  • We should have not the same stack maybe ? Laravel vuejs webpack in my case – Eloise85 Nov 07 '18 at 15:28
  • I've tried with a clean webpack-simple template and inside of my app based on webpack too, but cannot reproduce described behavior. Any chance to reproduce it in a fiddle or shared code? Otherwise I'm sorry. Only one more idea: you can try to remove stuff step by step or have a look at your properties. What's inside of `columns`, `cols`, and so on. – RWAM Nov 07 '18 at 20:30

0 Answers0