iview组件i-select一个坑,多个select切换后,选项没有了,并且页面也没有更新,解决方法

在使用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:"";//最终处理方法
来处理。发现没问题了

  • 5
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值