Vue 异步更新 -- $nextTick

Vue 异步更新 – $nextTick

**创建 工程：
H:\java_work\java_springboot\vue_study

ctrl按住不放 右键 悬着 powershell

H:\java_work\java_springboot\js_study\Vue2_3入门到实战-配套资料\01-随堂代码素材\day04\准备代码\16-$nextTick

vue --version
vue create v-next-tick-demo
cd v-next-tick-demo
npm run serve

app.vue

<template>
  <div class="app">
    <div v-if="isShowEdit">
      <input type="text" v-model="editValue" ref="inp" />
      <button>确认</button>
    </div>

    <div v-else>
      <span> {{ title }} </span>
      <button @click="handleEdit">编辑</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "大标题",
      isShowEdit: false,
      editValue: "",
    };
  },
  methods: {
    handleEdit() {
      this.isShowEdit = true;
      // this.console.log(this.$refs.inp);
      // this.$refs.inp.focus();

      this.$nextTick(() => {
        this.console.log(this.$refs.inp);
        this.$refs.inp.focus();
      });

      // setTimeout(() => {
      //   this.$refs.inp.focus();
      // }, 1000);
    },
  },
};
</script>

<style>
</style>