Toggling between two icons

Hiya!

So I am working on a sortable table and using the sort/sort-up/sort-down icons

But try as I might, I can’t get the icon components to change after the first instance. Almost like the DOM node is being rendered but not cleared when the icon should change.

in the template:

  <icon icon="sort" v-if="sort.segment !== 'completed_at'"></icon>
  <icon :icon="sortIconDirection" v-else></icon>

and I have a computed value:

    sortIconDirection() {
      return this.sort.direction === 'asc' ? 'sort-up' : 'sort-down';
    },

And I can see the computed value correctly toggling in state, but the icon doesn’t switch out. I’ve also tried adding another icon component with a set of v-if/else-if conditions and I can’t get it to quite work. (BTW, icon is just what I named the imported vue-fontawesome component as, migrating over from Justineo/vue-awesome)

I hope this makes sense! I’ve been up for a long time ha. If needed, I can try to build a reduced test case if you’re unable to reproduce.

Thanks!

[OriginalEXE]

Hmm, I am seeing the same issue, I found that adding :key="JSON.stringify(sortIconDirection)" to your icon element solves this, but I am interested in understanding why it’s needed at all.

[CmdrSharp]

@robmadole Good news! I both re-produced it, and found a work-around. It seems the shorthand exits for the font-awesome-icon causes this behavior. When closing that tag out normally instead, v-if cases behave like they should!

Example: https://codesandbox.io/s/y0ky64p1z

Not sure if I’m missing anything obvious here, but every single example from the repo readme shows using shorthand termination - so either the documentation should be updated, or this should work! 😃

Hope it helps!

EDIT: I do realize that self-closing tags are a thing of XHTML, which is why it may be failing - but again, since the documentation displays them, it’d make sense that they work. If it is a bug, please let me know - otherwise, I’ll gladly make a PR to update the readme, reflecting proper use.