Nuxt3中调用输入框宽度调整函数报错，如何正确传参？

问题根源 #

你在模板里用@keydown="adjustWidth(this)"时，这里的this指向的是组件实例而非input DOM元素，所以函数里的input.value自然是undefined，触发报错。

两种可行解决方案 #

方案1：通过事件对象传递DOM元素 #

修改模板事件绑定，用$event.target获取真实的input元素，同时换用@input事件（keydown触发时输入框value尚未更新，会导致宽度计算滞后）：

<div class="row">
    <div class="base-input">
       <input
       @input="adjustWidth($event.target)"
       type="text" 
       placeholder="Input title" 
       name="title"
       />
    </div>
</div>

优化函数，处理空值避免报错：

<script setup>
function adjustWidth(input) {
    const value = input.value || '';
    const width = value.length * 8 + 25;
    // 增加最小宽度限制，防止输入为空时过窄
    const minWidth = 120;
    input.style.width = `${Math.max(width, minWidth)}px`;
}
</script>

方案2：使用Vue的ref绑定元素（更符合Vue开发范式） #

通过ref直接绑定input元素，无需传参，还能在页面初始化时设置初始宽度：

<script setup>
import { ref, onMounted } from 'vue';

const inputRef = ref(null);

function adjustWidth() {
    if (!inputRef.value) return;
    const value = inputRef.value.value || '';
    const width = value.length * 8 + 25;
    const minWidth = 120;
    inputRef.value.style.width = `${Math.max(width, minWidth)}px`;
}

// 页面加载时初始化宽度（若输入框有默认值）
onMounted(() => {
    adjustWidth();
});
</script>

<template>
<div class="row">
    <div class="base-input">
       <input
       ref="inputRef"
       @input="adjustWidth"
       type="text" 
       placeholder="Input title" 
       name="title"
       />
    </div>
</div>
</template>

额外优化建议 #

• 固定系数8仅适配特定字体大小，若要更精准，可创建隐藏span元素，将输入值注入后读取offsetWidth作为宽度依据，避免字体变化导致的误差。
• @input事件已覆盖输入、粘贴、删除等所有value变化场景，无需额外绑定其他事件。

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