碰到的问题:在同一个vue页面中,有多个button元素为兄弟元素关系,前两个按钮的显示为互斥关系,同时前两个button都有disabled属性。
当代码中第二个button的v-if为false,且disabled为true时,由于vue diff算法使用索引寻找差异的原因,第三个button在渲染时会继承该disabled属性,导致第三个button(实际渲染后的第二个)会显示为禁用状态。
解决办法:添加唯一key
给这些互为兄弟元素的button添加一个唯一的key属性,这样在diff算法中就不会出现继承了同一个索引下元素的属性导致渲染错误的情况。
注意:该代码中保证key为唯一值就行