Vue3获取v-if中的ref
在v-if中当为false时,此时dom未被渲染,无法获取到该元素<div ref="myref" v-if="flag"></div>setup(){const flag = ref(false)const myref = ref()return {flag,myref}}
·
在v-if中当为false时,此时dom未被渲染,无法获取到该元素
<div ref="myref" v-if="flag"></div>
setup(){
const flag = ref(false)
const myref = ref(null)
console.log(myref.value)//null
return {
flag,
myref
}
}
将变量改为true,在nextTick中就能拿到了
<div ref="myref" v-if="flag"></div>
setup(){
const flag = ref(false)
const myref = ref(null)
flag.value = true
nextTick(()=>{
console.log(myref.value)//<div></div>
})
return {
flag,
myref
}
}
在element-plus中,Dialog也是使用的v-if,获取Dialog中的ref时 ,ref以回调的方式赋值
注意@open之后的事件中dom才被渲染,这里我在@close中获取
<el-dialog @close="resetform()">
<el-form
:ref="(el)=>userformref = el"
></el-form>
</el-dialog>
function resetform(){
userformref.value.clearValidate()
}
更多推荐
已为社区贡献1条内容
所有评论(0)