• 需求:两个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>
Logo

前往低代码交流专区

更多推荐