vue.js - v-if获取dom节点的问题
本文介绍了vue.js - v-if获取dom节点的问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
isShow默认是false,也就是点击的时候才会显示,但是这样的话显示后就没法获取dom了,有好的办法吗?
或者说我把v-if改成v-show,但是这样的话v-focus就没效了,有没有办法点击的时候手动获取一下焦点
<tr v-for='(i,index) in list'></div>
<td @click="changeMobile(index)" >
<input type="text"
v-model='i.mobileNumber'
style="width:100%;"
v-focus
@refs="dom"
v-if="isShow" >
</div>
</td>
以下是v-focus指令代码
Vue.directive('focus', {
// 当绑定元素插入到 DOM 中。
inserted: function (el) {
// 聚焦元素
el.focus()
el.select()
}
});
如果我想用这个指令的时候传一个方法该怎么传 我用 v-focus="focus" 这样有问题
解决方案
你可能需要了解下vue指令的钩子函数 update 钩子。
如果使用v-show的话,可以在指令中这样修改:
Vue.directive('focus', {
// 当绑定元素插入到 DOM 中。
inserted: function (el) { //在元素渲染到dom时调用,只调用一次。
// 聚焦元素
el.focus()
el.select()
},
update: function (el) { //在元素每次更新时调用。
// 聚焦元素
el.focus()
el.select()
}
});
// 可以将inserted 与 update 函数抽离为公用的方法。
这样在input每次隐藏与现实的时候都会获取焦点。ps:如非必要建议不要随意注册全局指令
这篇关于vue.js - v-if获取dom节点的问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文