一、问题描述

    想在el-input显示的时候focus。

<template>
	<div @dblclick="ondbclick">
		<div v-show="!isEdit"></div>
		<div v-show="isEdit">
			<el-input ref="editTask"></el-input>
		</div>
	<div>
</template>

<script>
    export default {
        name: "",
        data() {
            return {
                isEdit: false
            }
        },
		methods: {
            ondbclick() {
            // 想在input出现的时候把focus到input上
                this.isEdit = true;
                this.$refs.editTask.onfocus();
            },
        }
    }
</script>

二、问题所在

    上面样写是不行的，你会发现并没有focus到el-input上，这是因为data改变后vue是异步响应的，它会先执行下一条代码，但是这时的el-input并没有显示在页面上，所以不会focus。

三、解决办法

vue为这种情况提供了方法

  为了在数据变化之后等待 Vue 完成更新 DOM，可以在数据变化之后立即使用
Vue.nextTick(callback)。这样回调函数将在 DOM 更新完成后被调用。

  在组件内使用 vm.$nextTick() 实例方法特别方便，因为它不需要全局 Vue，并且回调函数中的 this 将自动绑定到当前的 Vue 实例上。

四、实现代码

methods: {
    ondbclick() {
        this.isEdit = true;
        this.$nextTick(() => this.$refs.editTask.focus());
    },
}