解决ElementUI的el-rate组件改变值页面不渲染的问题

问题原因

事情是这样的，本人作为一名后端从业者，为了提（追）升（赶）自（潮）己（流），使用vue作为前端写了个商城项目，就在开发评价模块的时候遇到问题了。使用ElementUI的Rate时候，发现设置默认值后，更改评分，评分的值变了，页面却没有渲染，依旧是五星。
rate代码如下:

<div v-for="(item,index) in items" :key="index" class="comments">
	<el-rate
		v-model="item.commentLevel"
		:colors="['#99A9BF', '#F7BA2A', '#FF9900']"
		show-text
	>
	</el-rate>
</div>

解决方案

在网上找了一些方案，没找到靠谱的，突然想到既然页面值变了，el-rate没有重新渲染，可以试试 this.$forceUpdate() 迫使 Vue 实例重新渲染。
新增changeRage方法：

/**
 * 改变分数后，迫使 Vue 实例重新渲染
 */
changeRage() {
	this.$forceUpdate();
}

然后调用changeRage方法：

<div v-for="(item,index) in items" :key="index" class="comments">
	<el-rate
		@change="changeRage"
		v-model="item.commentLevel"
		:colors="['#99A9BF', '#F7BA2A', '#FF9900']"
		show-text
	>
	</el-rate>
</div>

这样问题就完美解决了。
我的方案可能不适用于你遇到的问题，但希望能帮助到你！