在使用vue的数据为数组的时候容易遇到死循环以及不自动更新的情况,我们都知道数组是引用赋值。只要改变一个就会改变原数组,让后vue会根据数据的变动重新刷新页面,重新绑定数据,但是有时候却不重新绑定,我遇到的主要有两个。
1.数据缓存,这种很好解决官方也说明了vue采用虚拟节点,数据没有发生变化是不会更新,如果一定要更新可以给元素加key属性

:key="uniqueId"

2.我在使用select控件的时候遇到的先看代码
html

 <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>

简单的说下代码:
1.这里用了两个 字符串变量 一个数组
2.改变showClassType 类型来触发选项内容然后筛选出classList中对应类型的值。最后通过点击下拉框选中值绑定到classid
3.界面是这样的在这里插入图片描述
4.当其中一个下拉框有数据,另外一个没数据的时候,选中一个数据,进行切换,会导致所有下拉框内容都消失。
处理:通过监视showClassType 输出classList 我发现数据都在

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

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

        },

然后我就想会不会是我选中了classid 再切换的时候没有清除的原因,进过测试确实是这样的然后我就写了
this.classid= newVal==OldVal?this.classid:"";//最终处理方法
来处理。发现没问题了

Logo

前往低代码交流专区

更多推荐