Vue: 使用 v-if 从功能组件切换到非功能组件不会更改 v-data-* 属性。

创建于 2020-03-02  ·  3评论  ·  资料来源: vuejs/vue

版本

2.6.11

转载链接

https://codesandbox.io/embed/heuristic-brown-u7rvw?fontsize=14&hidenavigation=1&theme=dark

重现步骤

单击复选框。

什么是预期?

它应该是蓝色背景色的“BLUE BOX”。

实际发生了什么?

上面写着“BLUE BOX”,没有背景色。


该问题源于当 blue_block div 被交换到时,data-v-* 属性没有被重新设置。 它仍然使用功能组件中子div的data-v-*属性。 因此 CSS 类样式不适用。

https://imgur.com/a/gukDePJ

从功能组件切换到其他组件很有用。 例如,在切换到更复杂的组件之前显示一个简单的加载栏组件。

最有用的评论

我认为这可能与 Vue 在更新期间如何回收节点有关。 作为一种解决方法,向组件和 div 添加key会产生预期的行为。

所有3条评论

我认为这可能与 Vue 在更新期间如何回收节点有关。 作为一种解决方法,向组件和 div 添加key会产生预期的行为。

测试

此页面是否有帮助?
0 / 5 - 0 等级