iview组件i-select一个坑,多个select切换后,选项没有了,并且页面也没有更新,解决方法
在使用vue的数据为数组的时候容易遇到死循环以及不自动更新的情况,我们都知道数组是引用赋值。只要改变一个就会改变原数组,让后vue会根据数据的变动重新刷新页面,重新绑定数据,但是有时候却不重新绑定,我遇到的主要有两个。1.数据缓存,这种很好解决官方也说明了vue采用虚拟节点,数据没有发生变化是不会更新,如果一定要更新可以给元素加key属性:key="uniqueId&qu
·
在使用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:"";//最终处理方法
来处理。发现没问题了
更多推荐
已为社区贡献2条内容
所有评论(0)