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

【问题标题】：vue element el-select can't show label according to v-modelvue element el-select不能根据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行左右，所以分享了关键代码。

标签： vue.js

【解决方案1】：

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

【讨论】：