Vue 在可见时关注输入字段

Question

我有一个标题 (H1) 和一个编辑按钮。按下按钮时，我想将 h1 切换到输入字段。接下来我想关注输入字段，但该部分不起作用，因为输入字段的引用未定义。我尝试了 settimeout 作为解决方法，但没有成功。

有人有可行的解决方案吗？

<template>
    <h1 class="text-gray-900 text-2xl font-medium flex items-center">
        <input v-if="isEditing" ref="name" type="text" v-model="role" @keyup.esc="toggleEdit" />
        <span v-else>{{ role }}</span>
        <button @click="toggleEdit">Edit</button>
    </h1>
</template>

<script>
    export default {
        data() {
            return {
                role: 'Admin',
                isEditing: false,
            };
        },
        methods: {
            toggleEdit() {
                this.isEditing = !this.isEditing;
                this.$refs.name.focus();
            },
        },
    };
</script>

可用代码：Codesandbox

Answer 1

您只需等待 DOM 更新即可。这有效：

<template>
  <h1 class="text-gray-900 text-2xl font-medium flex items-center">
    <input
      v-if="isEditing"
      ref="roleName"
      class="text-gray-900 text-2xl font-medium"
      type="text"
      v-model="role"
      @keyup.esc="toggleEditRoleName"
    />
    <span v-else>{{ role }}</span>
    <button
      @click="toggleEditRoleName"
      class="ml-2 h-5 w-5 text-blue-300 cursor-pointer"
      aria-hidden="true"
    >
      Edit
    </button>
  </h1>
</template>

<script>
export default {
  data() {
    return {
      role: "Admin",
      isEditing: false,
    };
  },
  methods: {
    toggleEditRoleName() {
      this.isEditing = !this.isEditing;

      this.$nextTick(() => {
        this.$refs.roleName.focus();
      });
    },
  },
};
</script>

Vue 在可见时关注输入字段

Vue focus on input field when it becomes visible

ref

vue.js