[Vuejs]-Vue v-if not working even though condition is met (Font Awesome icon not updating)

by

2👍

✅

Thanks @Maylor I implemented your change and although it didn’t fix the problem on its own, it did make my code cleaner and easier to debug.

After more investigation I found that the problem was not in my Vue code but related to Font Awesome. Under the hood, my button-component uses Font Awesome, which was not re-rendering the icon even though the value had changed.

Following this post, I removed fontawesome/js/all.js and now am only using fontawesome/css/all.css. This solved the problem.

👤fidgeter

1👍

I’m not sure exactly why this is happening from the code snippet, but I often find things work just nicer if you try and keep the same component and change the props, rather than having if-else’s with different instances of the same component. One way you could do this is by having just 1 button component:

<button-component
  :icon="getIcon(prop)"
  @click="handleClick(prop)"
/>

methods something like this

getIcon(prop) {
  if (this.colBeingSorted != prop) return 'fas fa-sort';
  if (sortedAscending) return 'fas fa-arrow-up';
  return 'fas fa-arrow-down';
},
handleClick(prop) {
  if (this.colBeingSorted == prop) {
    this.sortedAscending = !this.sortedAscending;
  } else {
    this.colBeingSorted = prop;
    this.sortedAscending = true;
  }
}

As an aside I don’t think I’ve seen ‘prop’ being used here when just referring to the index of an item in an array. Especially confusing in Vue when prop has a very particular meaning! I’d just use columnIndex in this case.

👤Maylor

Leave a comment