Element UI --- Select下拉框多选页面数据不更新问题

昨天在做项目时，有一个功能是使用Element UI的Selec多选下拉框，在使用时，发现每次选择的数据已经发生变化，但是页面上的显示却没有变化，由于是第一次碰到这个问题，一开始无从下手，后来百度寻找了方法，其实也很简单，就是调用一个方法而已。

问题：

上图就是已经选择了两个值，控制台也输出了两个角色的ID，但是select框内显示却没有变化，依然是显示一个。。。

在网上寻找方法，说是：render函数没有自动更新，所以在选择的时候需要强制更新

解决办法：

<el-select v-model="form.username" filterable :disabled="isUser" placeholder="请输入" style="width: 150px" @change="changeVal" :filter-method="brandKeyChange"><el-optionv-for="item in selectedNo":key="item.userId":label="item.userName":value="item.userName"><span style="float: left">{{ item.userName }}</span><span style="float: left">（{{ item.humanName }}）</span></el-option>
</el-select>

在select上定义 @change="changeVal"方法，然后在方法里边执行如下函数调用即可

changeVal(value) {userRoles = []value.forEach(function (data, index) {const role = {id: data}userRoles.push(role)})this.$forceUpdate(); // 调用此函数方法
},