TagInput 组件怎么实现回车添加标签？

Mc.瑞琴提问于 2026-03-18 09:48:19 阅读 38

组件

我用 Vue 写了个 TagInput，想让用户敲回车就自动把输入内容变成标签加进去，但试了好几次都不行。输完字按回车，页面直接刷新了，标签也没加上。

我监听了 @keydown.enter 事件，也用了 .prevent 修饰符，但还是没效果。是不是哪里写错了？

<template>
  <div>
    <input
      v-model="inputValue"
      @keydown.enter.prevent="addTag"
      placeholder="输入标签后按回车"
    />
    <span v-for="tag in tags" :key="tag" class="tag">{{ tag }}</span>
  </div>
</template>

我来解答赞 4 收藏

反馈

1 条解答

馨月 Lv1

兄弟，你这个坑我踩过。

问题不在 keydown 事件上，而是你的 input 大概率包在 form 里面了吧？回车在 form 里会触发 submit 事件，页面就直接刷新了。你用的 .prevent 是阻止 keydown 的默认行为，但 keydown.enter 本身没什么默认行为要阻止。

真正的提交是 form 的 submit 干的。

解决方法很简单，要么把外层的 form 去掉，要么在 form 上也加个 .prevent：

<form @submit.prevent>

  <input

    v-model="inputValue"

    @keydown.enter.prevent="addTag"

    placeholder="输入标签后按回车"

  />

</form>

或者如果你不需要 form 的其他功能，直接把 form 标签删掉就行。

2026-03-18 15:06