Incorrect icon displays with v-if, works correctly with v-show

[danielbachhuber]

Hi 👋

Thanks for the great library 😄

I'm running into an odd issue where the incorrect icon appears if I use v-if to render the parent element:

The correct icon displays as expected if I use v-show:

Here's my code, for what it's worth:

<button
    v-show="suggestion.is_archived"
    class="font-bold py-1 px-2 rounded text-xs bg-gray-200 hover:bg-gray-300 text-gray-600 hover:text-gray-800 space-x-2 flex items-center"
    name="restore-suggestion"
    title="Restore suggestion"
    type="button"
    :disabled="isSaving"
    @click.prevent="setIsArchived(false)">
    <svg-vue class="w-4" icon="restore-small"></svg-vue> <span>Restore</span>
</button>
<button
    v-show="!suggestion.is_archived"
    class="font-bold py-1 px-2 rounded text-xs bg-gray-200 hover:bg-gray-300 text-gray-600 hover:text-gray-800 space-x-2 flex items-center"
    name="archive-suggestion"
    title="Archive suggestion"
    type="button"
    :disabled="isSaving"
    @click.prevent="setIsArchived(true)">
    <svg-vue class="w-4" icon="archive-small"></svg-vue> <span>Archive</span>
</button>

Any ideas on how to track this down further?

[danielstgt]

This is due to the nature of how Vue handles its diffing, nothing related to SVG Vue.

When v-if is used, the second button isn't rendered, while v-show just sets display: none. That means if the condition for the second button to get rendered is true, Vue will start checking what needs to be changed. Since it already knows the <svg-vue> tag, it just skips it. Again, this applies to every element and isn't specifically a SVG Vue thing.

To get around this, you can use a key attribute.

Based on your example, this version should work with v-if:

<button
    v-if="suggestion.is_archived"
    key="restore"
    class="font-bold py-1 px-2 rounded text-xs bg-gray-200 hover:bg-gray-300 text-gray-600 hover:text-gray-800 space-x-2 flex items-center"
    name="restore-suggestion"
    title="Restore suggestion"
    type="button"
    :disabled="isSaving"
    @click.prevent="setIsArchived(false)">
    <svg-vue class="w-4" icon="restore-small"></svg-vue> <span>Restore</span>
</button>

<button
    v-if="!suggestion.is_archived"
    key="archive"
    class="font-bold py-1 px-2 rounded text-xs bg-gray-200 hover:bg-gray-300 text-gray-600 hover:text-gray-800 space-x-2 flex items-center"
    name="archive-suggestion"
    title="Archive suggestion"
    type="button"
    :disabled="isSaving"
    @click.prevent="setIsArchived(true)">
    <svg-vue class="w-4" icon="archive-small"></svg-vue> <span>Archive</span>
</button> 

Just remember that keys have to be unique, Vue has to distinguish by their name.

However, I would actually recommend to use v-show in this case, the rendering cost is lower when toggling between the two states, also no key is needed since the buttons just change their visibility via styling (display: none state).

I will add a note in the readme depending on your case, since toggling icons isn't that uncommon.

[danielbachhuber]

Thanks @danielstgt ! This makes sense to me, and I appreciate you taking the time to explain in such detail.