vue element-ui select组件，初始化赋值后，无法更改label值？

Question

<el-select v-model="postForm.roleId" placeholder="职位" @change="selectBD">
   <el-option 
     v-for="item in roleList" 
     :key="item.id" 
     :value="item.id" 
     :label="item.name" />
</el-select>

roleList 和 postFrom.roleId 都是通过接口获取的，能够正确的赋值，但是后续去选择切换的时候，postForm.roleId 会正确的变化，但ui没有更新，依旧是如图显示，不论怎么切换，postFrom.roleId正确，但是ui方面就是不变。。

Answer 1

要不试试把roleId放到外面来传给select ???

<el-select v-model="roleId" placeholder="职位" @change="selectBD">

Answer 2

终于知道原因了，我获取的数据对象有a,b,c 属性，但我使用的是 本地定义的 d属性，然后将 c的值赋给d，这样赋值没问题，但是由于vue的响应式更新机制，是无法监测对象新增的属性，所以必须要用 vue.$set()方法来添加新的属性，达到响应式更新。

Answer 3

贴一下数据和代码

Answer 4

八成是data里面的postForm.roleId的格式或者值没跟roleList中的对应起来，检查一下。

Answer 5

了解下element中el-select中的这个属性value-key="id"，你绑定的值和渲染的值需要一致，出现这样的情况，应该是你select绑定的是一个对象，并不是单一值！