vue select绑定数据想一次传多个值作为参数/选择值改变,显示不变bug

上一篇关于下拉框的地址在vue中给el-select下拉框传默认值

如果你是来解决bug的,请跳到第3条

<el-select v-model="form.Name">
   <el-option v-for="item in dqList" :key="item.dqId" :label="item.name" :value="item.dqId"></el-option>
</el-select>

1.如上我想把dqid和name的值都传给后台,分别传给Name和Code
我们就把:value改为json

:value="{'Code':item.dqid,'Name':item.name}">

注意这里可能会出现一个bug就是你选择任何一个内容,显示的都是一个固定的名字,不会变化
改成这样试试(呃,经检验这种是没有bug,但是后台接收不到值了就)

:value="[{'Code':item.dqid,'Name':item.name}]">

2.用:value="{'Code':item.dqid,'Name':item.name}">会出现选中的值不改变的bug
网上最常见的解决方案

this.$set(this.form, 'Name', this.form.Name.Name)

但是并不好用,这样写后台接收不到值,白忙
3.参考了这个作者的方法vue-element 选择框 选择值改变,显示不变
我们的代码修改为

<el-select v-model="form.Name"  @input="change">
   <el-option v-for="(item, index) in dqList" :key="item.dqId" :label="item.name" :value="index"></el-option>
</el-select>
change (index) {
        this.form.Name = this.dqList[index].name
        this.form.Code = this.dqList[index].dqId
      },

在返回给后台的参数时这样写

'Name': this.form.Name,
'Code': this.form.Code,

注意;这个方法暂不支持clearable

发布了38 篇原创文章 · 获赞 1 · 访问量 5159

猜你喜欢

转载自blog.csdn.net/ShangMY97/article/details/103957253