vue element el-select can't show label according to v-model

Question

I'm using el-select and use object as options in VUE with element UI.

{id:'123',name:'label1'}

Bind id to value and name to label of options. When I change v-model to id '123', the options with name 'label1' can't be selected and '123' is displayed in el-select. the drop down menu has the desired options and an extra '123' option.

What I need is the option will be selected when I change v-model.

In a editable el-select element, press Enter to trigger below method:

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;
                            })

                        })
                    });
            }
        },

The options array returned by a method, Is the el-select can't detect data changes in a method so it will not update the options menu.

@ShuYoshioka The component is too large about 1500 lines, So I shared the key codes. — lei li

lei li lei li · Accepted Answer · 2018-09-04T05:49:34

I can't resolve my question directly. But I found that el-select has not watched v-model changes. So I changed a variable to trigger el-select render. Then use vm.$nextTick() to v-model.

vue element el-select can't show label according to v-model

1 Answers