Naive UI的Modal关闭后数据未重置，如何解决？

UX-红会提问于 2026-02-06 22:20:27 阅读 29

组件

我在用Naive UI的Modal做表单编辑时遇到问题，每次关闭Modal后表单里的输入内容没有清空，导致下次打开还是残留上次的数据。

尝试用v-model:visible绑定显示状态，同时在关闭时调用resetForm()方法，但数据就是不更新。代码逻辑是这样的：


<template>
  <n-modal v-model:show="visible">
    <n-form ref="formRef" :model="formData">
      <n-input v-model:value="formData.name" />
    </n-form>
  </n-modal>
  <button @click="visible = false">取消</button>
</template>

<script setup>
import { ref } from 'vue'
const visible = ref(false)
const formData = ref({ name: '' })

const resetForm = () => {
  formData.value = {}
}
</script>

点击取消按钮虽然能关闭Modal，但formData.name的值还是保留着，哪里出问题了？

我来解答赞 8 收藏

反馈

1 条解答

Designer°剑博 Lv1

你这个问题其实挺常见的，我之前也踩过这个坑。问题出在数据初始化的方式上。

首先你要知道，当使用ref创建响应式对象时，直接赋值一个新的空对象，Vue是能追踪到变化的。但这里有个细节需要注意：当组件还在挂载过程中时，你调用了resetForm方法将其赋值为空对象，这时候表单组件内部可能已经读取过初始值了。

给你推荐一个更稳妥的做法：

把resetForm改成这样：
function resetForm() {
formData.value = {
name: ''
}
}

然后在关闭modal的时候调用它：

或者更推荐在打开的时候初始化：
function openModal() {
visible = true
resetForm()
}

这样不管你是点击遮罩层关闭还是点击按钮关闭，都能保证每次打开都是干净的数据。

如果你希望更彻底一点，可以考虑用watch来监听visible状态，在关闭的时候自动清空：
watch(() => visible, (newVal) => {
if (!newVal) {
resetForm()
}
})

不过要特别注意一点：如果你的表单里有其他字段，比如number类型的输入框，建议把初始值都补上：
formData.value = {
name: '',
age: null
}

因为如果初始值不明确，可能会导致某些类型检查的问题。我之前就因为少写了一个字段，导致输入框显示undefined，调试了半天。

最后再给你一个完整的代码示例：

const visible = ref(false)

const formData = ref({ name: '' })



function resetForm() {

  formData.value = {

    name: ''

  }

}



function openModal() {

  visible.value = true

  resetForm()

}

然后在模板里：

<n-modal v-model:show="visible">

  <n-form ref="formRef" :model="formData">

    <n-input v-model:value="formData.name" />

  </n-form>

</n-modal>

<button @click="openModal">打开</button>

这样处理之后，每次打开modal都会初始化数据，关闭的时候清空数据，就不会出现数据残留的问题了。

2026-02-06 22:22