关于el-select绑定value为item后,在下拉框中点击选中某一个元素,无法正常选中的问题

最近在项目中需要实现的效果如图:
关于el-select绑定value为item后,在下拉框中点击选中某一个元素,无法正常选中的问题_第1张图片
选中不同的产品,其对应的平台的选项不同,在拿到所选平台的value值的同时需要给另一个变量appid赋值。
先来看一下接口返回的数据结构和前端代码吧~

{
    code:0,
    data:[
    {
        productname: weixin,
        productCname:微信,
        apps:[
            {
                appid:'1001',
                platformname:'android',
                platformCname:'Android',
            },
            {
                appid:'1002',
                platformname:'ios',
                platformCname:'iOS',
            }
        ]
    }
  ]
}

关于el-select绑定value为item后,在下拉框中点击选中某一个元素,无法正常选中的问题_第2张图片
如果我们在el-select中绑定的值为item.productname的话,我们每次选择不同的产品需要遍历一次productList去拿到对应的apps的值,为了省了这次遍历,我们可以给其绑定item。
但这时我们选中某个选项时,发现所有的值都被选中了,我们需要使用value-key来指定要显示的属性key,这样就能完美解决问题了~

你可能感兴趣的:(前端,vue.js)