Vue中如何清除模态框（Modal）表单内的字段选中值

你使用的是Vuetify封装的受控表单组件，所有选中状态完全由绑定的v-model变量驱动，不需要嵌套原生form标签实现清空，核心操作是在保存成功、关闭模态框前，将所有绑定的表单v-model变量重置为初始状态即可。

具体实现步骤 #

• 第一步：先梳理你代码里绑定的所有表单v-model变量，你贴的代码里一共涉及3个受控变量：
  1. 下拉选择器v-select绑定的selectedDate
  2. 标签组v-chip-group绑定的selection
  3. 多选列表v-list-item-group绑定的model
• 第二步：定义重置表单的方法，将上述变量重置为初始空值，示例代码如下：

// Vue2 Options API 写法
methods: {
  // 新增重置表单方法
  resetModalForm() {
    // 重置下拉选择器值
    this.selectedDate = null
    // 重置标签选中项，直接赋值空数组触发响应式
    this.selection = []
    // 重置多选列表选中项
    this.model = []
    // 如果有其他表单绑定变量，也在这里一起重置
  },
  // 你的原有保存提交方法
  async submitForm() {
    // 原有提交逻辑...
    // 提交成功后先执行重置，再关闭模态框
    this.resetModalForm()
    this.modalVisible = false // 替换为你自己控制模态框显隐的变量
  }
}

// Vue3 Composition API 写法
const resetModalForm = () => {
  selectedDate.value = null
  selection.value = []
  model.value = []
}

const submitForm = async () => {
  // 原有提交逻辑...
  resetModalForm()
  modalVisible.value = false
}

• 第三步：如果需要兼容模态框点击右上角关闭按钮、点击蒙层关闭的场景，也可以监听模态框的关闭事件，在关闭回调里调用resetModalForm方法即可。

常见问题说明 #

原生form标签的reset方法只会作用于原生<input>、<select>等表单控件，对Vuetify封装的自定义组件无效，所以你之前考虑的嵌套form的方案无法实现需求。
你之前清空了绑定数组但选择器值未清除，是因为没有同步重置v-select绑定的selectedDate变量，只要把所有绑定的v-model都重置即可解决。

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