vue 自定义指令 focus 条件聚焦 时，在与v-if共存时需要处理的问题

关于vue中,比如下面一段代码, 需要在isEdit的时候，实现input聚焦,
而input出现的时机是 也是isEdit 为真时,

自定义指令也生效了。就是不聚焦。

<ul v-cloak v-if="list">
            <li v-for="it of list">
                <span :id="it.id" @click="edit(it)">{{it.name}}</span>
                <a href="javascript:;" class="close" @click="close(it)">close</a>
                <input type="text"
                       v-model="it.name"
                       v-to-focus="it.isEdit"
                       v-if = "it.isEdit"
                       @blur="blur(it)"
                       @keyup.enter="editsuccess(it)"
                       @keyup.esc="escEvent(it)"
                />
            </li>
        </ul>

directives : {
            "to-focus" : function (el,binding) {
                console.log(binding)
                if(binding.value){
                    el.focus();
                    console.log(el)
                }
            }
        }

具体实施，input取消用v-if控制显示,切换到class上面去 .isEdit input 显示,然后在css中写相应的css，平时隐藏，这样就OK了。

<ul v-cloak v-if="list">
            <li v-for="it of list"
                :class="{isedit:it.isEdit}"
            >
                <span :id="it.id" @click="edit(it)">{{it.name}}</span>
                <a href="javascript:;" class="close" @click="close(it)">close</a>
                <input type="text"
                       v-model="it.name"
                       v-to-focus="it.isEdit"                      
                       @blur="blur(it)"
                       @keyup.enter="editsuccess(it)"
                       @keyup.esc="escEvent(it)"
                />
            </li>
        </ul>

至于原因，尼玛我刚用vue觉得是 v-if 条件显示的时候是异步的改变视图，自定义指令已经执行过了。所以就888了