v-if获取dom节点的问题

Question

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" 这样有问题

Answer 1

你可能需要了解下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：如非必要建议不要随意注册全局指令

Answer 2

watch一下isShow，然后通过$refs.dom设置focus？

Answer 3

你的意思是不是点击后input显示并获得焦点？是的话可以试试这样：

Vue.directive('focus', {
  // 当绑定元素插入到 DOM 中。
  inserted: function (el, { value }) {
    if (value) {
       el.children[0].focus();
     }

  }
});

<input type="text"
         v-model='i.mobileNumber'  
         style="width:100%;" 
         v-focus="true"
         @refs="dom"
         v-if="isShow" >