Given a template tag that uses a bound style attribute :style="styles"
, the styles are not properly updated after the server side rendering. Importantly, the computed properties being used in the style tag are working, but they simply don't get swapped into the style attribute.
Here's a reproduction:
<template>
<div class="example-bug" :style="styles">
This container should be {{ size }}px wide with a {{ background }} background.
<code>
{{ styles }}
</code>
</div>
</template>
<script>
export default {
data () {
return {
size: 300
}
},
computed: {
styles () {
return {
width: `${this.size}px`,
backgroundColor: this.background
}
},
background () {
if (this.size < 100) {
return 'red'
} else if (this.size >= 100 && this.size < 200) {
return 'blue'
} else if (this.size >= 200 && this.size < 300) {
return 'green'
} else if (this.size >= 200 && this.size < 300) {
return 'salmon'
} else if (this.size >= 300 && this.size < 400) {
return 'silver'
} else if (this.size >= 400 && this.size < 500) {
return 'gold'
} else {
return 'yellow'
}
}
},
methods: {
resize () {
this.size = window.innerWidth
}
},
created () {
if (typeof window !== 'undefined') {
window.addEventListener('resize', this.resize)
this.resize()
}
}
}
</script>
<style lang="scss">
.example-bug {
width: 300px;
background-color: red;
position: absolute;
height: 100vh
}
code {
font-size: 12px;
display: block;
padding-top: 1em;
}
</style>
Here is an example of the above (full video here):
And here is a fresh install of nuxt with the above code: https://github.com/journeygroup/nuxt-style-bug
Somehow the data output in the <code>{{ styles }}</code>
block is correct, but the same exact property output in the :style="styles"
attribute is not correct. Also, certain changes in the property will trigger the styles to begin working properly. In this particular case, if I make the window small and the 'color' changes (again) it "snap out of it" and start working just fine.
Interestingly, this does not occur when a page has been navigated to with vue-router and the page was not rendered server-side.
<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This question is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c517">#c517</a>)</em></sub></div>