H5W3
当前位置:H5W3 > 其他技术问题 > 正文

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

<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方面就是不变。。

clipboard.png

回答:

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

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

回答:

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

回答:

贴一下数据和代码

回答:

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

回答:

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

本文地址:H5W3 » vue element-ui select组件,初始化赋值后,无法更改label值?

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址