Problem and solution cannot be selected for vue elementUI drop-down box value

The problem of not selecting the value of the vue elementUI drop-down box

When you write a system, you will have this requirement: click Modify and put the data you need to modify into the form, which will include drop-down radio boxes and drop-down multiple boxes.

To display the data in the radio box of the drop-down box, you only need to assign the selected id to the value bound by the drop-down box. When modifying, you will find that the drop-down box cannot be selected. The reason for this problem is that the view is not updated in time enough. You can bind a change event in the drop-down box and write it intothis.$forceUpdate()There will be no problem

<el-form-item label="game">
    <el-select v-model="" filterable placeholder="Please select" @change="changeGame">
        <el-option v-for="item in gameList" :key="" :label="" :value=""></el-option>
    </el-select>
</el-form-item>

 =  // Click to modify and request the interface，Assign value to variables bound to the drop-down box This will cause untimely update of the view

changeGame(id){
    this.$forceUpdate() //Bind change event on the drop-down box to update the view so that there will be no problem with view update},

Multiple selection boxes. Multiple selection boxes are not like radio selection boxes. Just as you can directly assign values, it needs to be processed further.

<el-form-item label="Label" prop="label">
    <el-select v-model="" multiple collapse-tags placeholder="Please select">
         <el-option v-for="item in labels" :key="" :label="" :value="">
        </el-option>
    </el-select>
</el-form-item>

//:Binding value of the drop-down box: All data in the drop-down boxlet arr=[]
(val=>{
    (item=>{
        if(val==){
            ();
        }
    })
})
=arr

Extensions:

Solve the problem that the drop-down box of element-ui has a value but cannot be selected after clicking.

Causes

Because the data in the drop-down list is updated in real time based on the change of the value of the input box, rather than unchanged, frequent updates may cause the value bound to be bound by the select after clicking an item in the drop-down list, especially when the bound value is an object (vue cannot detect the change of the object attribute), which will cause the problem of being unable to be selected.

Solution

If it cannot be updated in time, then use the change event to listen for the change value, call this.$forceUpdate() to manually force update, and re-render.

The code is as follows

<el-select v-model="value" placeholder="Please select"  @change="change()">
      <el-option v-for="item in options" :key="" :label="" :value=""></el-option>
</el-select>
change(){
      this.$forceUpdate()
  },

Reference link /a/1190000020744277

This is the end of this article about the problem that the value of the vue elementUI drop-down box cannot be selected. For more related contents of the vue elementUI drop-down box, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!