vue中select绑定多个值及数据回显
很久没有写文章了， 这篇文章主要是记录我在项目中遇到的一个小问题，其实说小也不小，由于刚接触vue和iViewUI，对于其中select如何绑定多个值我还不是很清楚，查了一下官网，官网上例子是下面这样的：
v-model只能是value的值，又因为属性 label-in-value=“true” 即：在返回选项时，是否将 label 和 value 一并返回，默认只返回 value，所以我就想是不是可以用label来传递另一个值于是我就采用了第三种方法解决了这个问题。
下面是我找到的其他两种方法以及我使用的方法，仅供参考，如有问题还望各位不吝赐教。
1.拼接value
后来在群里问了问，说是可以改成这样的:value="item.value+item.label",想来大家应该也懂这个意思，为了在传值的时候更方便，可以把它改成这样:value="item.value+'/'+item.label"，之后就可以很方便的这样value.split('/')[0]取值了。
2.绑定索引
还有一种方法就是不绑定具体的值，而是去绑定索引值:value="index"，在获取值的时候可以这样获取options[index].value.
3.绑定事件
3.数据回显
以上三种方法都可以很好的解决select绑定多值的问题，但是我们不妨多想一点，在新增操作的时候可以这样，那么编辑的时候怎么回显呢？select会根据绑定值与某个option的value值是否相同来判断是否选中，在上述两个方法中，我们不可能为了这么一个操作让后台在数据库中多存一个拼接好的value或者一个索引，想必后台同学也不会愿意的。对于第一种方式，回显时只需要将从后台获取的数据拼接在一起就行，对于第二种方式，需要去进行循环对比，找出对应的索引值,然后进行赋值，而对于第三种方式，则正常获取对象就可以了。
4.总结
这虽然是个挺常见的问题，但对于我来说是个不小的问题，现在公司项目不那么急，抽空记录一下。这只是我自己的想法，如果您有更好的方法，不妨分享一下。
相关链接：
网友评论