The iview component i-select has a pit, after switching multiple selects, the options are gone, and the page is not updated, the solution

When using vue data as an array, it is easy to encounter infinite loops and non-automatic updates. We all know that arrays are assigned by reference. As long as you change one, the original array will be changed. After that, Vue will refresh the page and rebind the data according to the data changes, but sometimes it does not rebind. There are two main things I encountered.
1. Data caching, this is a very good solution. The official also explained that Vue uses virtual nodes. If the data has not changed, it will not be updated. If you must update, you can add key attributes to the elements.

：key="uniqueId"

2. Look at the code html first when I use the select control

 <div>
                        <radio-group v-model="showClassType" type="button" size="large">
                            <radio label="我的班级"></radio>
                            <radio label="学校班级"></radio>
                        </radio-group>
                    </div>
                    <div class="meta">选择班级</div>
                    <div v-if="showClassType=='我的班级'" class="task-choose-box">
                        <i-select  v-model="classid" filterable style="width:180px">
                            <i-option v-for="item in classList"  v-if="item.createUser==userid" :key="item.uuid" :value="item.uuid">{
   
   { item.classname }}</i-option>
                        </i-select>
                    </div>

                    <div v-if="showClassType=='学校班级'" class="task-choose-box">
                        <i-select  v-model="classid"   filterable style="width:180px">
                            <i-option v-for="item in classList" v-if="item.createUser!=userid"  :value="item.uuid">{
   
   { item.classname }}</i-option>
                        </i-select>
                    </div>

Simply put the code:
1. Two string variables and an array are used here
2. Change the showClassType type to trigger the option content and then filter out the value of the corresponding type in the classList. Finally, click the drop-down box to select the value and bind it to the classid
3. The interface is like this
4. When one of the drop-down boxes has data, and the other has no data, select one data and switch, which will cause all the drop-down box contents to disappear.
Processing: By monitoring the showClassType output classList, I found that the data is all there

        watch: {
            showClassType:function(newVal,OldVal){
                this.classid= newVal==OldVal?this.classid:"";//最终处理方法

                console.log(this.classList)
                console.log(this.classid)
             console.log("切换学生会出问题噢噢噢噢")
                },

        },

Then I wondered if it was the reason why I did not clear the classid when I selected the classid and switched. After the test, it was indeed like this. Then I wrote
this.classid= newVal==OldVal?this.classid:"";/ /Final processing method
to deal with. Found no problem