Vue2 is not updating one specific component (<Button>) inside v-if and v-else, while the rest of the content is updated.
I have recently discovered a solution to make this code function, but I am still unsure about Vue2 re-rendering behavior. I worry that I may encounter difficulties in implementing it in the future, especially since I only have two conditionally exclusive blocks (<v-if> and v-else), and currently utilize <span> and <div> for each of them.
The original code failed to work as expected. The issue was that the <Button> component did not update when the condition ('root.authentication') changed, while the <p> tag was successfully updated (why not <Button>?):
<template>
<span v-if="root.authentication" data-id-logout-box>
<p>Logout</p>
<Button :root="root" text-label-preset="Salir" :on-click-preset="root.logout" />
</span>
<span v-else data-id-login-box>
<p>Login</p>
<Button :root="root" text-label-preset="Entrar" :on-click-preset="root.login" />
</span>
</template>
This alternative code does the trick. The main difference is that instead of using 2 span tags, this version includes 1 span and 1 div tag:
<template>
<span v-if="root.authentication" data-id-logout-box>
<Button :root="root" text-label-preset="Salir" :on-click-preset="root.logout" />
</span>
<div v-else data-id-login-box>
<Button :root="root" text-label-preset="Entrar" :on-click-preset="root.login" />
</div>
</template>
I attempted different approaches such as modifying the class attribute on these elements and experimenting with data-* attributes, yet none of these methods proved successful.
Given my constraints on tag usage, how can I create a workaround to support an infinite nesting of <v-else-if>?
Thank you.