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

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

组件

我用 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>

我来解答赞 9 收藏

反馈

2 条解答

Designer°俊涵 Lv1

从你描述的情况来看，问题可能出在事件处理的细节上。具体来说，虽然你用了 .prevent 修饰符来阻止默认行为，但有时 Vue 的事件处理机制可能会有点微妙。

首先，我们来看看你的代码逻辑。你在监听 @keydown.enter.prevent，这确实应该能阻止页面刷新，但有时候为了确保万无一失，我们需要更明确地处理这个事件。

这里有个改进版的实现方式，我建议用 @keyup.enter 来代替 @keydown.enter，并且在方法里显式地调用 event.preventDefault()：

<template>

  <div>

    <input

      v-model="inputValue"

      @keyup.enter="addTag"

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

    />

    <span v-for="tag in tags" :key="tag" class="tag">{{ tag }}</span>

  </div>

</template>



<script>

export default {

  data() {

    return {

      inputValue: '',

      tags: []

    }

  },

  methods: {

    addTag(event) {

      event.preventDefault(); // 确保阻止表单提交或页面刷新

      if (this.inputValue.trim() === '') return; // 避免空标签



      this.tags.push(this.inputValue.trim()); // 添加标签

      this.inputValue = ''; // 清空输入框

    }

  }

}

</script>

这样做有几个好处：一是用 @keyup.enter 能确保我们在按键抬起时才处理逻辑，这样用户体验更好；二是显式调用 event.preventDefault() 可以彻底避免页面刷新的问题。

顺便说一句，开发中遇到这种奇怪的行为很常见，有时候框架的特性确实会让人摸不着头脑。记得我之前也遇到过类似问题，调试了好几个小时才找到原因，真是让人头大。不过现在明白了原理就好多了。

2026-04-01 01:00

馨月 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