The Select component in ElmentUI adds data dynamically

The Select component in ElmentUI adds data dynamically

The business scenario

There is a drop-down box to select the user name. When entering the drop-down box, determine whether the input is a new value. If so, add user data.

implementation

When the select component is added, the new data will trigger the change event, and the value returned is the input string, and the user data is an array of objects. Therefore, check the parameters of the change event with the data in the drop-down box. If there is no match, add the data.

Example (using VUE) :

// html <el-select @change="changeSelect" filterable allow-create default-first-option v-model="value" Placeholder =" please select "> <el-option V-for ="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> // js changeSelect(val) { console.log(val) let flag = false for (let i = 0; i < this.options.length; I ++) {console.log(this.options[I]) if (val === this.options[I].value) {// Not a new attribute flag = true break}} if (! Flag) {// Console. log('add user')}},Copy the code

Problems arising

After adding new data, set the current new data as an option. After assigning the vaule of the new data returned by the interface, the value displayed in the dropdown box is value instead of label as expected.

Reason: because of a drop-down box to query the data and the assignment, but due to the data in a drop-down box is still in rendering, result in the drop-down box tied variables for the operation of the assignment and a drop-down box type attribute combination effect, make the new value into a new input value, not and the label in the drop-down box linkage;

$nextTick() or setTimeout to make it asynchronous;