iView + Vue 踩坑日记，两个Select组件联动，第二个Select通过第一个Select的值调接口取值

永不消失的彩虹

于 2019-02-28 11:39:49 发布

阅读量2.9k

点赞数 4

分类专栏： Vue iView 文章标签： iView Vue Select联动

本文链接：https://blog.youkuaiyun.com/xlszzck/article/details/88019918

版权

iView 同时被 2 个专栏收录

4 篇文章

订阅专栏

Vue

2 篇文章

订阅专栏

本文介绍在Vue项目中如何实现两个Select组件的联动效果，当Select_1选项发生变化时，Select_2的选项随之更新，并确保Select_2正确显示默认选项。通过使用v-if动态控制Select_2的渲染，解决Select_2选项更新后默认选中项未正确刷新的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：两个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>