resetProgress能否重置含已有标签的完整表单？如何实现标签重置？

让我来一步步解答你的这两个问题：

问题1：resetProgress能否重置包含已有标签的整个表单？ #

首先，当前你的代码里还没有定义resetProgress方法，而且原生的type="reset"按钮只会重置表单内的原生表单控件（比如你的输入框），不会自动处理你自定义的标签数据（也就是tags数组）。所以默认情况下，即使你绑定了resetProgress，如果不手动实现逻辑，它是没法重置包含已有标签的整个表单的。

问题2：如何修改实现Reset按钮同时删除所有已创建的标签？ #

你需要做几个关键修改来实现这个需求，下面是具体步骤和完整的修改后代码：

核心修改点 #

1. 实现resetProgress方法，同时清空输入框内容和标签数组，还要同步更新父组件的绑定值
2. 修正按钮的点击绑定语法（Vue用@click而非on:click）
3. 移除Reset按钮的type="reset"，避免原生重置逻辑和自定义逻辑冲突

修改后的完整组件代码 #

<template>
  <div>
    <form>
      <div class="input-wrapper">
        <input type="text" v-model.trim="tag" placeholder="Type here" @keypress.prevent.stop.enter="addTag">
        <button @click.prevent.stop="addTag">Add</button>
      </div><br>
      <span class="tag" v-for="(tag, index) in tags" :key="index">
        <span>{{ tag }}</span>
        <span class="delete" @click="tags.splice(index, 1)">&times;</span>
      </span>
      <div class="item">
        <!-- 修正绑定语法并移除原生reset类型 -->
        <button @click.prevent.stop="resetProgress">Reset</button>
        <button type="submit" value="submit">Submit</button>
      </div>
    </form>
  </div>
</template>
<script>
export default {
  props: {
    value: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    tags(n, o) {
      this.$emit('input', n);
    }
  },
  data() {
    return {
      tag: '',
      tags: [...this.value], // 创建props副本，避免直接修改props触发警告
    };
  },
  methods: {
    addTag() {
      if (this.tag && !this.tags.includes(this.tag)) {
        this.tags.push(this.tag);
        this.tag = '';
      }
    },
    resetProgress() {
      // 清空输入框内容
      this.tag = '';
      // 清空所有标签数组
      this.tags = [];
      // 同步更新父组件的绑定值
      this.$emit('input', []);
    }
  }
}
</script>

额外说明 #

• 初始化tags时用[...this.value]创建副本：Vue不允许直接修改props，这样做可以避免控制台出现警告，同时保证组件内部维护自己的标签状态
• resetProgress里的$emit('input', [])：因为你的组件用了v-model的语法糖（通过value props和input事件实现双向绑定），所以这一步能确保父组件的绑定数据也同步清空

这样修改后，点击Reset按钮就能同时清空输入框和所有已创建的标签啦！

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