vue element el-select不能根据v-model显示标签

Posted 2023-02-23

【中文标题】vue element el-select不能根据v-model显示标签

【英文标题】：vue element el-select can't show label according to v-model

【发布时间】：2019-02-01 15:39:14

【问题描述】：

我正在使用 el-select 并将对象用作 VUE 中带有元素 UI 的选项。

id:'123',name:'label1'

将 id 绑定到值，将名称绑定到选项标签。 当我将 v-model 更改为 id '123' 时，无法选择名称为 'label1' 的选项，并且 el-select 中会显示 '123'。下拉菜单包含所需的选项和一个额外的“123”选项。

我需要的是当我更改 v-model 时将选择该选项。

在可编辑的 el-select 元素中，按 Enter 键触发以下方法：

baseAttributeValueChange(attrId, values)  //Enter pressed
            var vm = this;
            if (this.getAttributeValueById(values[attrId]))  //Skip this block
             else  //HERE
                var attrValue = values[attrId];
                values[attrId] = null;

                apiProduct.createAttributeValue(this.GLOBAL.axios, this.getCategoryId(), attrId, attrValue).then(
                    (res) => 
                        vm.loadAttributeValues(attrId).then(() => 
                            values[attrId] = '';//That's my temporary solution
                            vm.$nextTick(() => 
                                values[attrId] = res.id;
                            )

                        )
                    );
            
        ,

方法返回的options数组，el-select是不是检测不到方法中的数据变化所以不会更新options菜单。

【问题讨论】：

可以分享一下你的组件代码吗？

@ShuYoshioka 组件太大了1500行左右，所以分享了关键代码。

【参考方案1】：

我无法直接解决我的问题。但是我发现 el-select 并没有观察到 v-model 的变化。所以我改变了一个变量来触发 el-select 渲染。然后使用 vm.$nextTick() 到 v-model。