iView + Vue 踩坑日记,两个Select组件联动,第二个Select通过第一个Select的值调接口取值
需求:两个Select组件联动,Select_1数据改变了,Select_2的选项跟着改变。问题:Select_2的已选择Option依旧是之前的,并没有达到默认选中第一项,或者不选中的预期效果。解决方法:给Select_2增加v-if判断,Select_1数据开始变化时v-if="false"卸载Select_2,获取到数据后再v-if="true"重新渲染Select_2。<...
·
- 需求:两个Select组件联动,Select_1数据改变了,Select_2的选项跟着改变。
- 问题:Select_2的已选择Option依旧是之前的,并没有达到默认选中第一项,或者不选中的预期效果。
- 解决方法:给Select_2增加v-if判断,Select_1数据开始变化时v-if="false"卸载Select_2,获取到数据后再v-if="true"重新渲染Select_2。
<div>
<Select v-model="Select_1" @on-change="selectChange">
<Option value="0">电影</Option>
<Option value="1">电视剧</Option>
<Option value="2">综艺</Option>
<Option value="3">动漫</Option>
</Select>
<Select v-model="Select_2" v-if="status">
<Option v-for="(item, index) in level_two_options" :value="index" :key="index">
{{item}}
</Option>
</Select>
</div>
<script>
export default {
methods: {
selectChange (value) {
getData({
'type': value
}).then(res => {
this.level_two_options= res.data //通过请求接口拿到Option的数据
//这两步是关键,通过切换v-if的false和true状态,卸载Select_2然后重新加载
this.status= false
this.status= true
})
}
}
}
</script>
更多推荐
已为社区贡献3条内容
所有评论(0)