vue中select绑定多个值及数据回显

在Vue.js中,当遇到select组件需要绑定多个值时,官方v-model仅支持value绑定。本文介绍了两种解决方案:1) 拼接value,方便传值和回显;2) 绑定索引,通过索引值获取选项。对于编辑场景的数据回显,第一种方法只需拼接后台数据,而第二种方法需循环对比找到对应索引。这是作者在实际项目中遇到并解决的问题,欢迎分享更好的方法。
摘要由CSDN通过智能技术生成
距离上篇文章已经快九个月了,我是不是堕落了。。 这篇文章主要是记录我在项目中遇到的一个小问题,其实说小也不小,在去年刚接触vue的时候,对于select如何绑定多个值这个问题一度让我不知所措。刚开始完全没接触过vue和elementUI直接上手,跟着element粘贴复制官网写着还挺顺利,突然某天后台需要在select选中时让我多传个值,我不知道怎么办了,官网上例子是下面这样的:


v-model只能是value的值,我完全被官网的例子限制住了(怪我太蠢)。

 1.拼接value

后来在群里问了问,说是可以改成这样的:value="item.value+item.label",想来大家应该也懂这个意思,为了在传值的时候更方便,可以把它改成这样:value="item.value+'/'+item.label",之后就可以很方便的这样value.split('/')[0]取值了。 

2.绑定索引

还有一种方法就是不绑定具体的值,而是去绑定索引值:value="index",在获取值的时候可以这样获取options[index].value.具体例子在这里

3.数据回显

以上两种方法都可以很好的解决select绑

  • 0
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值