Vue3 Script Setup+Quasar中如何聚焦动态新增的输入框？

问题分析 #

你当前通过数组selectedSpaces动态生成输入框，新增后无法聚焦新输入框的核心原因：

• 直接调用selectedSpaces.value[index].focus()无效，因为selectedSpaces存储的是字符串值，不是输入框的组件实例/DOM元素
• 依赖DOM层级的$event.target操作不可靠，Quasar组件的内部DOM结构可能和预期不符，且代码耦合性高

可行方案：使用数组Ref存储动态输入框实例 #

利用Vue3的数组Ref特性，为每个动态生成的q-input绑定实例引用，新增后通过引用直接调用聚焦方法。

步骤1：声明存储输入框实例的数组Ref #

在Script Setup中添加：

import { ref, nextTick } from 'vue';
import { QInput } from 'quasar';

const selectedSpaces = ref<string[]>([]);
// 存储每个q-input的组件实例
const inputRefs = ref<InstanceType<typeof QInput>[]>([]);

步骤2：为动态输入框绑定Ref #

修改模板中的q-input，通过函数式Ref将每个输入框实例存入数组：

<div
    class="col-3 q-pa-md q-gutter-sm"
    v-for="(space, index) in selectedSpaces"
    :key="index"
>
    <div class="row">
        <div class="col-9">
            <q-input
                v-model="selectedSpaces[index]"
                @keyup.enter="AddNewSpace()"
                :ref="(el) => { if (el) inputRefs.value[index] = el }"
             />
        </div>
        <div class="col-2 q-pt-xs q-pl-sm">
            <q-btn label="X" @click="removeSpace(index)" />
        </div>
    </div>
</div>
<q-btn label="New Space +" @click="AddNewSpace()" />

步骤3：修改AddNewSpace方法实现聚焦 #

利用nextTick等待DOM更新完成后，获取新输入框的实例并调用focus()：

const AddNewSpace = async () => {
    selectedSpaces.value.push('');
    const newIndex = selectedSpaces.value.length - 1;
    
    // 等待Vue更新DOM，确保新输入框已挂载
    await nextTick();
    
    // 获取新输入框实例并聚焦
    if (inputRefs.value[newIndex]) {
        inputRefs.value[newIndex].focus();
    }
};

// 可选：添加删除输入框的方法（同步更新Ref数组）
const removeSpace = (index: number) => {
    selectedSpaces.value.splice(index, 1);
    inputRefs.value.splice(index, 1);
};

关键说明 #

• nextTick必须调用：Vue的DOM更新是异步的，新增数组元素后，新输入框不会立刻渲染到DOM中，需要等待下一次DOM更新周期完成后才能获取到实例
• Quasar的QInput组件内置focus()方法：直接调用组件实例的focus()即可，无需操作底层DOM元素
• 函数式Ref绑定：确保每个输入框实例准确对应数组索引，若有删除输入框的操作，记得同步更新inputRefs数组，避免引用错乱

内容的提问来源于stack exchange，提问作者HumanHickory