当输入字段变得可见时，Vue会关注输入字段

Posted 2023-02-21

【中文标题】当输入字段变得可见时，Vue会关注输入字段

【英文标题】：Vue focus on input field when it becomes visible

【发布时间】：2021-11-06 03:00:10

【问题描述】：

我有一个标题 (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

【问题讨论】：

你可以试试这个。$nextTick(()=>this.$refs.name.focus())

我知道这不太一样，但一种解决方法是改为使用<h1> 标签contenteditable

【参考方案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>