element-ui中动态修改组件属性的值

Posted 2023-03-17

参考技术A 在图1中，有一个button-group，如果我们想让他保持一定的状态，即点击'3日'后，下方出现相应的图标，这个'3日'的button一直保持亮度。该如何做呢？

在图2中，我们发现，element-ui给定的button type其实有很多的，只要在我们点击处罚button的事件的同时，修改button的type就行了。

在vue中，有一个很方便的dom方法，就是ref

我们给每个button一个特定的ref值。需要修改的时候，我们在这个button的时间里，给每个button的type一个特定值就行了。

如果，这样，我们就能观察到确实修改了button的type属性并且有效果，但是打开浏览器的console(F12)我们就会发现，出现了很多报错：

报错的内容根据字面含义可以知道，如果我们修改这个type的话，父组件也会发生变动。这个方法并不成立。同时，报错的内容里面，给我们提供了修改的方法，就是用data或者computed来保存一个临时的属性。

html:

JS:

这样，就没有错误了。