Vue2结合Element UI构建项目-select结合raido使用

想实现的效果是，有个radio组，给出一些列值，选择一个值的话，select组件带上相应值请求，请求结果供选择

组件模板中代码：

 <el-select v-model="request_id" placeholder="请选择requestId">
    <el-option
      v-for="(item,index) in request_ids"
      :key="index"
      :label="item"
      :value="item">
    </el-option>
</el-select>
<el-radio-group v-model="period" @change="chang_period">
    <el-radio :label="1">1分钟内</el-radio>
    <el-radio :label="5">5分钟内</el-radio>
    <el-radio :label="30">30分钟内</el-radio>
    <el-radio :label="60">1小时内</el-radio>
  </el-radio-group>

组件中：

 export default {
       name:"Catelog",
       data(){
           return{      
               period:60,
               request_ids:[],
               request_id:""
           }
       },
      
        mounted:function(){
          this.showid=this.$route.params.showid
       this.$get("/xxx/xxx/"+this.showid/this.period).then((response)=>{
            if (response.suc==1||response.suc=="1")
            {
            this.resp_data=response.data;
            this.request_ids=this.resp_data.request_ids
            }else{
              this.request_ids=[]
              this.request_id=""
            }
       })},
       methods:{
       
        chang_period:function(){
         let url="/XXX/xxx/"+this.showid+"/"+this.period
        this.$get(url).then((response)=>{
             if (response.suc==1||response.suc=="1")
             {
             this.resp_data=response.data;
             this.request_ids=this.resp_data.request_ids
             }else{
               this.request_ids=[]
               this.request_id=""
           }
          
           })
         }
       }
     
   }

data中定义初始值

period:60, //radio默认选中的值
request_ids:[],//select options选项
request_id:""//select选中的值 

mounted中定义页面加载时去请求period默认值的request_ids值。
methods中定义chang_period函数，这是radio值改变后的调用函数，带着新的radio值去请求request_ids值。
模板值的raido组件值绑定chang_period

 @change="chang_period"

注意，若是没有请求到值的话，需要将request_ids置空，防止返回为空时select中却给出的是上一次的选项值。