стиль границы не отображается правильно при переключении стиля в VUE - PullRequest
Новая
       4

стиль границы не отображается правильно при переключении стиля в VUE

0 голосов
/ 28 сентября 2018

Проверьте это демо ниже: 

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/vue@2.5.17/dist/vue.js"></script>
  </header>
  <body>
    <div id="app">
      <div class="box" :style="style"></div>
      <button @click="changeStyle">changeStyle</button>
    </div>
  </body>
</html>

В этой демонстрации нажмите кнопку changeStyle, чтобы переключить два разных стиля.

Вот шаг:

  • Сначала styleA применяется с red borderBottom и red borderRight

  • Нажмите кнопку changeStyle, styleB, ожидаются green border и red borderRightно отображается только green border.

  • Нажмите кнопку changeStyle еще раз, как мы видим, отображается только red borderBottom, например red borderRight просто исчезает.

  • Нажмите еще раз, вы никогда не увидите red borderRight

Что-то не так со сравнением виртуального узла и рендерингом в VUE?

Ответы [ 3 ]

0 голосов
/ 28 сентября 2018

Это ошибка, но эта проблема считалась wontfix .Это связано с тем, что border является сокращенным свойством.

Редактировать: Джейкоб побил меня на несколько секунд, но да, как было сказано в выпуске gh, обходной путь - использовать key какхеш для принудительного рендеринга.

0 голосов
/ 28 сентября 2018

Альтернативным, но более уродливым «хаком» будет дифференциация стиля borderRight, поэтому borderRight: '1px solid red' в styleA и borderRight: '1px solid red ' (обратите внимание на пробел в конце) в styleB.

Это заставляет vue «думать», что borderRight изменилось, и «заставляет» его применять стиль (и «пропускает» шаг оптимизации, когда он пропускает применение стиля, который, по мнению vue, уже применен).

https://jsfiddle.net/px5qoaed/

0 голосов
/ 28 сентября 2018

Я не знаю точно, почему это происходит.

Как вы сказали, вероятно, что-то не так с виртуальной DOM.

По моему опыту, когда что-то не так с DOMрендеринг в Vue, использование key решит проблему.В твоем случае так и было.https://jsfiddle.net/jacobgoh101/Ld5e8azs/

Просто добавьте key в div с динамическим стилем 

<div class="box" :style="style" :key="style"></div>

key просто должно быть любое уникальное значение, которое отличает 2 стиля

...