表单回填时数据不显示怎么办？

Code°红彦提问于 2026-02-24 07:54:19 阅读 116

交互

我从接口拿到用户信息后，想把数据回填到编辑表单里，但输入框一直是空的。明明 console.log 能看到数据，赋值也用了 this.form = res.data，可页面就是没更新。

是不是 Vue 的响应式问题？我试过用 this.$set 但还是不行。表单结构大概是这样的：

<input v-model="form.name" placeholder="姓名">
<input v-model="form.email" placeholder="邮箱">

data 里初始化了 form 对象，但可能结构不完整？求指点！

我来解答赞 14 收藏

反馈

1 条解答

Designer°子诺 Lv1

我之前踩过这个坑，问题就出在 Vue 的响应式追踪上。你虽然初始化了 form 对象，但如果 data 里只写了 form: {}，后面从接口拿来的数据字段如果比初始结构多，Vue 是不会自动把新字段变成响应式的。

比如你初始化是 form: { name: '' }，但接口返回了 { name: '张三', email: 'xx@xx.com' }，那 email 字段就不会被追踪，v-model 当然不更新。

解决办法有两个，选一个就行：

第一个，初始化的时候把所有字段都写上默认值，哪怕空着也行：

data() {

  return {

    form: {

      name: '',

      email: '',

      // 其他字段也提前占位

    }

  }

}

然后接口回来直接 this.form = res.data 就行，因为字段名都一致，Vue 会替换整个对象的引用，触发响应式更新。

第二个，如果接口字段太多或者结构不固定，别直接赋值整个对象，而是用 $set 或者 Object.assign 合并：

this.form = { ...this.form, ...res.data }

// 或者

Object.keys(res.data).forEach(key => {

  this.$set(this.form, key, res.data[key])

})

我之前就图省事直接 this.form = res.data，结果发现 email 一直没值，查半天才发现是响应式没跟上。记住一点：Vue2 里对象的新增属性不会自动响应，除非提前声明或者用 $set。

2026-02-24 08:00