弹窗编辑表单数据不更新怎么办？

UI泽勋提问于 2026-03-14 20:44:25 阅读 9

交互

我在用 Vue 做一个用户列表，点击编辑会弹出模态框，里面是表单。但每次点编辑，输入框里的值还是旧的，明明我传了新数据进去。

试过用 v-model 绑定，也用了 watch 监听 props 变化去更新本地 data，但第一次打开没问题，第二次就卡在上一次的数据了。

这是我的组件关键部分：

<template>
  <div v-if="showModal">
    <input v-model="formData.name" />
  </div>
</template>

<script>
export default {
  props: ['user'],
  data() {
    return {
      formData: { name: '' }
    }
  },
  watch: {
    user: {
      handler(newVal) {
        this.formData.name = newVal.name
      },
      immediate: true
    }
  }
}
</script>

是不是哪里没处理好响应式？还是弹窗复用导致的问题？

弹窗编辑数据交互

我来解答赞 2 收藏

反馈

暂无解答