Check this demo below:
new Vue({
el: '#app',
data: {
flag: true
},
puted: {
style() {
let styleA = {
borderBottom: '1px solid red',
borderRight: '1px solid red'
};
let styleB = {
border: '1px solid green',
borderRight: '1px solid red'
}
return this.flag ? styleA : styleB
}
},
methods: {
changeStyle() {
this.flag = !this.flag;
}
}
}).box {
width: 100px;
height: 100px;
}<html>
<header>
<script src="/[email protected]/dist/vue.js"></script>
</header>
<body>
<div id="app">
<div class="box" :style="style"></div>
<button @click="changeStyle">changeStyle</button>
</div>
</body>
</html>Check this demo below:
new Vue({
el: '#app',
data: {
flag: true
},
puted: {
style() {
let styleA = {
borderBottom: '1px solid red',
borderRight: '1px solid red'
};
let styleB = {
border: '1px solid green',
borderRight: '1px solid red'
}
return this.flag ? styleA : styleB
}
},
methods: {
changeStyle() {
this.flag = !this.flag;
}
}
}).box {
width: 100px;
height: 100px;
}<html>
<header>
<script src="https://cdn.jsdelivr/npm/[email protected]/dist/vue.js"></script>
</header>
<body>
<div id="app">
<div class="box" :style="style"></div>
<button @click="changeStyle">changeStyle</button>
</div>
</body>
</html>In this demo, click changeStyle button to toggle two different styles.
Here is step:
- First,
styleAis applied withred borderBottomandred borderRight Click
changeStylebutton,styleBis applied,green borderandred borderRightare expected but only thegreen borderis shown.Click
changeStylebutton again, as we can see, onlyred borderBottomis shown, likered borderRightjust disappear.Click again, you will never see the
red borderRight
Is something wrong with paring virtual node and rendering in VUE?
3 Answers
Reset to default 4I don't really know exactly why this happens.
As you said, there's probably something wrong with the virtual DOM.
In my experience, when something is wrong with the DOM rendering in Vue, using key would solve the problem. In your case, it did. https://jsfiddle/jacobgoh101/Ld5e8azs/
Just add key to the div with dynamic style
<div class="box" :style="style" :key="style"></div>
key just needs to be any unique value that differentiates the 2 styles
It is a bug, but this issue was considered a wontfix. This is due to the fact that border is a shorthand property.
Edit: Jacob beat me by a few secs, but yes, as was stated in the gh issue, the workaround is use key as a hash to force the render.
Alternative but uglier 'hack' would be to differentiate the borderRight style, so borderRight: '1px solid red' in styleA, and borderRight: '1px solid red ' (notice the whitespace at the end) in styleB.
It makes vue 'think' that borderRight has changed, and 'forces' it to apply the style (and 'skips' an optimisation step where it skips applying a style that vue thinks is already applied).
https://jsfiddle/px5qoaed/