在业务中我们有时候需要动态生成多个下拉框进行一些数据处理操作,由于Vue的数据绑定机制很多时候会出现选择一个下拉框时其他下拉框也跟着改变的问题:
不难发现因为多个el-select中的v-model绑定的都是value这个字段,因此当然会联动改变
解决方案如下:
将数据绑定到arr[]这个数组中,利用index进行分开绑定,这样就可以解决问题了,运行结果如下:
扩展:
现在我们的各个下拉框之间已经相对独立,我们可能会需要对选中的值进行进一步的操作,这时我们也许会用到 @change,如果我们可以将index传入@change中这将可能会大大方便我们接下来的业务处理
@change传入index写法:
运行结果:
而如果单独使用change(value,index)是无效的,此时的index为undefined
利用lamda(=>)我们还可以传入更多的自定义参数,例如
val=>{change(val,index,item.key,item.label)}
这样我们的业务处理将会更加灵活