目录
ElementUI下拉框选择后不显示值
- 问题
vue(ElementUI)下拉框选择后赋值了,但是框上不显示
解决
- 方法一
下拉框数据是循环调用接口,数据层次太多,render函数没有自动更新,需手动强制刷新
// 手动刷新handleChange() { this.$forceUpdate()}
- 方法二
vue 无法监听动态新增的属性的变化,需要用 $set 来为这些属性赋值
// 操作下拉框选中事件handleChange(val) { // val 代表 value 值 if (val) { // 操作选中角色发生变化 this.$set(this.editModel, this.editModel.role, val) } else { this.$set(this.editModel, this.editModel.role, '') }}
elementUI下拉框value和label问题
使用elementUI中的下拉模板时发现了一个很大的坑,根据文档所介绍的是:
key
唯一标识label
选择之后显示到选择框中的值value
选中之后绑定给模型层的值
{{ item.username }} {{ item.email }}
但跑起来好像并不是这么一回事label并没有显示到选择框中。
然后我又微调了一下代码 将v-model中的值修改了回显问题解决了,但是选择后的显示问题依旧,我猜测和value有关。将value中的值修改成:value=“item.username”,选择和回显问题就解决了
{{ item.username }} {{ item.email }}
这个时候我意识到这和elementUI官网所说的不一致呀。并且提交表单后传入后台的数据只有manager.username是正确的 id仍然是回显的id,没有实现一个修改的效果,网上也给出了一些解决方法,但都达不到效果。
苦思冥想之后(其实就是百度了又百度之后)。
发现问题出在value绑定到模型层处,绑定对象给模型层的时候一定要加value-key=“id”,最终代码修改成如下
{{ item.username }} {{ item.email }}
又了解了一个大坑的解决方式
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。