<template>
   <div class="li" v-for="(item,index) in diclist">
    <Select v-model="model[index].val" ref="selectGrap" style="width:200px" @on-change="changeSelect(event,index)">
        <Option v-for="child in cityList" :value="item.value" :key="item.value">{{ child.label }}</Option>
    </Select>
   </div>
</template>
<script>
    export default {
        data () {
            return {
                diclist: [
                    {
                        name: 'New York',
                    },
                     {
                        name: 'New',
                    },
                    ],
                cityList: [
                    {
                        value: 'New York',
                        label: 'New York'
                    },
                    {
                        value: 'London',
                        label: 'London'
                    },
                    {
                        value: 'Sydney',
                        label: 'Sydney'
                    },
                    {
                        value: 'Ottawa',
                        label: 'Ottawa'
                    }
                ]
            }
        },
        computed:{
		        model(){
		         let arr=[];
		         arr.forEach((item)=>{
		             this.diclist.push({val:''})
		         })
		         return arr;
		         }
        },
        methods:{
          changeSelect(val,idx){
              console.log(this.$ref.selectGrap)     //vue实例数组
              console.log(this.$ref.selectGrap[idx])     //对应vue实例
              this.$nextTick(()=>{
                //放在this.$nextTick里执行，因为$refs不是响应式的，只在组件渲染完成后才填充
                //或者放在setTimeout里也可以实现
                this.$ref.selectGrap[idx].setQuery();
              })
          },
          setQuery(){
            console.log('执行啦')
          }
        }
    }
</script>