Termonna
Nuxt ignores boolean logic
@danielroe @manniL / TheAlexLichter
Hello, a quick update. I've found out that the original bug only occurs when
v-else is present. If you replace v-else with v-if with the opposite condition, everything works correctly. Example:
Original
Revised
This replacement has helped us avoid incorrect rendering in our project three times already
This approach also fixes the issue with the color from the example above from StackBlitz (but doesn't address the rendering speed of templates)19 replies
Nuxt ignores boolean logic
In the real project, there are no <p> tags; instead, divs and custom components are used. In the sandbox, I only used them for line breaks and simplicity. Instead of timeouts, there are asynchronous requests.
Unfortunately, avoiding templates is not possible because this is not a pet project but rather a large production code.
I'll try to wait for a response from the developers since my team and I have encountered quite unpleasant bugs due to this strange behavior.
Thank you very much for your response.
19 replies
Nuxt ignores boolean logic
Also, please note that the template inside the component
TheSecondTest with the text 'the second template' never displays, whereas in the identical component TheTest, the text 'template' inside the template does display (albeit with a delay)19 replies
Nuxt ignores boolean logic
I couldn't reproduce my specific bug in the sandbox, but I managed to create something similar. At least it seems to me that the cause of both my bug and the bug I created in the sandbox is the same.
In the file
/components/TheHeader.vue on line 6, there's a test variable called setFalseToColorize. If it's set to false, the expected result will occur (the background will turn red). The templates behave very strangely, apparently (this is also evident from the delays in their display).
Additionally, you can try moving the components TheTest and TheSecondTest out of the templates.
Furthermore, the behavior differs between the initial load (via ctrl+s) and refreshing the site display area (clicking on the refresh icon inside the sandbox).
Different forms of writing like const role = computed(() => storeToRefs(useUserStore()).role.value) and const { role } = storeToRefs(useUserStore()) do not change the behavior
https://stackblitz.com/edit/termonna-nuxt3-boolean-bug?file=components%2FTheHeader.vue19 replies
