I am using vueJS to handle a function which reloads my element.
We have our HTML elements here, a dropdown list to display the option
<el-select v-model="row.display_name_uuid">
<el-option v-for="(item, i) in displayNameList"
:key="i" :value="item.uuid"
:label="item.display_name">
</el-option>
</el-select>
Then we have our method here list is our array data and DisplayNameList contains the dropdown list’s select options
getExclusiceUuid (data, val) {
this.refreshDisplayNameList() // refresh the newly added data
this.list.forEach((item, index) => { //loop until key paired
if (item.key == data.key) {
let obj = JSON.parse(JSON.stringify(item))
this.list.splice(index, 1)//we try to remove it first
this.displayNameList = [...this.displayNameList]
this.list = [...this.list]
this.$forceUpdate()
obj.display_name_uuid = val
this.list.splice(index, 0, obj) //then we add it back here to try to force update
this.$forceUpdate()
}
})
},
After we update the Display Name List content we would also like to update the contain within the select box, but it doesn’t seem like it updates normally even we confirm the function runs after his.refreshDisplayNameList(), the select element doesn’t seem to refresh even we use this.list.splice(index, 1) remove it and recreate.