Question

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

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

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

我需要的是在更改v模型时将选择该选项。

在可编辑的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菜单。

Answer 1

我无法直接解决我的问题。但是我发现el-select尚未关注v模型的变化。因此，我更改了一个变量以触发el-select渲染。然后使用vm。$ nextTick（）进行v-model。

vue元素el-select无法根据v模型显示标签

1 个答案: