CODEWITHSUNDEEP
javascriptcssvue.jsvirtual-dom
Clocher Zhong
Clocher Zhong

Reputation: 2456

border style not rendering correctly when toggle style in VUE

Check this demo below:

new Vue({
	el: '#app',
  data: {
  	flag: true
  },
  computed: {
  	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.net/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:

Is something wrong with comparing virtual node and rendering in VUE?

Upvotes: 5

Views: 4518

Answers (3)

softbear
softbear

Reputation: 515

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.net/px5qoaed/

Upvotes: 1

woat
woat

Reputation: 451

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.

Upvotes: 3

Jacob Goh
Jacob Goh

Reputation: 20855

I 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.net/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

Upvotes: 4

Related Questions