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

在Vue中遇到自定义指令focus用于在isEdit时使input聚焦，但当input通过v-if与isEdit联动显示时，指令无法正常聚焦。解决方案是将v-if替换为class控制显示，利用CSS隐藏与显示input，因为v-if导致视图更新异步，指令已提前执行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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