Dos soluciones a nextTick en vue

 En este caso, puedes usar nextTick para resolverlo [recomendado]

<template>
    <div>
        <h2>欢迎您！{
   
   { name }}</h2>
        <button @click="edit">编辑</button>
        <input ref="content" v-show="status" type="text" v-model="name">
    </div>
</template>

<script>
export default {
    name: "Home",
    data() {
        return {
            name: "张三",
            status: false
        }
    },
    methods: {
        edit() {
            this.status = !this.status;
            // 等待页面渲染完毕后执行
            this.$nextTick(() => {
                // 显示输入框后自动获取焦点
                this.$refs.content.focus();
                // 获取输入框显示状态
                console.log(this.$refs.content.style.display);
            })
        }
    }
}
</script>

Nota: Cuando se activa el evento, se dividirá en dos ejecuciones, primero ejecutar el código fuera de nextTick y luego ejecutar el código dentro de nextTick después de que se actualice el DOM.

 

El segundo método: use un temporizador para resolver [no recomendado]

Por supuesto, usar un temporizador para retrasar la ejecución también puede resolver este problema.

<template>
    <div>
        <h2>欢迎您！{
   
   { name }}</h2>
        <button @click="edit">编辑</button>
        <input ref="content" v-show="status" type="text" v-model="name">
    </div>
</template>

<script>
export default {
    name: "Home",
    data() {
        return {
            name: "张三",
            status: false
        }
    },
    methods: {
        edit() {
            this.status = !this.status;
            // 使用定时器延迟执行
            setTimeout(() => {
                // 显示输入框后自动获取焦点
                this.$refs.content.focus();
                // 获取输入框显示状态
                console.log(this.$refs.content.style.display);
            })
        }
    }
}
</script>

Nota : no es necesario establecer una hora para el temporizador, por lo que se puede ejecutar inmediatamente después de que se actualice el DOM. Pero es más recomendable usar nextTick para solucionarlo.

 

 

Autor original: Wu Xiaotang

Tiempo de creación: 2023.5.7