vue动态ref总结

最新推荐文章于 2025-02-28 11:14:56 发布

原创最新推荐文章于 2025-02-28 11:14:56 发布 · 681 阅读

2 ·

CC 4.0 BY-SA版权

chen

文章标签：

#ref

vue 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了如何在Vue.js中使用模板语法动态渲染下拉选择框，并通过v-model双向绑定和@on-change事件监听来实现选项的选择与变化。展示了如何在组件渲染完成后对$refs进行操作，确保选择框的正确更新。

   <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>