v-bind in CSS for async component not applied
Vue version
3.3.4
Link to minimal reproduction
Steps to reproduce
The issue is apparent in the repro (the buttons are different widths).
The important points to reproduce this are; an async component using v-bind in CSS must be hidden by v-if="false" in a parent, when the component is then shown, the CSS variable is not applied.
What is expected?
The buttons should both have a 200px width applied.
What is actually happening?
Only the first button has the 200px width applied.
System Info
No response
Any additional comments?
No response
1
Hello,
I am writing to inquire about any updates on this issue. It appears that the associated Pull Request is ready for review.
Additionally, I have found a potential bug use case for this issue, which can be viewed here.
Here is the code for reference:
<template>
<div class="card" :style="`--title-color: ${titleColor};`">
<h1>Test v-bind vs manual handle CSS vars</h1>
<p>Background color: {{ bgColor }}</p>
<p>Title color: {{ titleColor }}</p>
</div>
</template>
<script setup>
const bgColor = "red";
const titleColor = "blue";
</script>
<style>
.card {
display: flex;
flex-direction: column;
justify-content: center;
background-color: v-bind(bgColor);
}
h1 {
color: var(--title-color);
}
</style>
Expected Behavior
The div with the class card should have a red background due to the v-bind directive on the background-color property in the style section. Furthermore, the h1 title's text color should be blue because of the CSS variable (--title-color) binding.
Current Behavior
At present, only the CSS variable binding is functioning as expected, with the h1 title appearing in blue. The v-bind directive does not seem to be applying correctly, as the div with the class card is not displaying the expected red background.
Best regards.