[SSR] Hydration error using v-bind in scoepd styles
Vue version
3.4.15
Link to minimal reproduction
https://stackblitz.com/edit/vue-issues-10259
Steps to reproduce
<script setup lang="ts">
const test = 100;
const test2 = 'red';
</script>
<template>
<div class="darn-it" style="padding: 100px" />
</template>
<style scoped>
.darn-it {
width: calc(v-bind(test) * 1px);
height: calc(v-bind(test) * 1px);
background-color: v-bind(test2);
}
</style>
What is expected?
No hydration error
What is actually happening?
[Vue warn]: Hydration style mismatch on
<div class="darn-it" style="padding:100px;--7a7a37b1…0;--7a7a37b1-test2:red;" data-v-7a7a37b1="">
- rendered on server: style="padding:100px;--7a7a37b1-test:100;--7a7a37b1-test2:red;"
- expected on client: style="padding:100px;"
Note: this mismatch is check-only. The DOM will not be rectified in production due to performance overhead.
You should fix the source of the mismatch.
at <App>
System Info
StackBlitz env
Any additional comments?
Good point! Closing here in favor of https://github.com/vuejs/core/issues/10215