Vue表单输入时v-model数据没更新是怎么回事？

萌新.子怡提问于 2026-02-17 08:50:33 阅读 25

框架

在用Vue写表单时，给输入框加了v-model="user.profile.email"，但输入内容后数据完全没变，控制台也没报错，这是为什么啊？

我已经初始化了user: { profile: {} }，尝试过把v-model改成:value + @input的手动绑定方式，这样反而能正常更新…


<template>
  <input type="email" v-model="user.profile.email" placeholder="邮箱">
</template>

<script>
export default {
  data() {
    return {
      user: {
        profile: {}
      }
    }
  }
}
</script>

难道是对象嵌套太深的问题吗？或者需要什么特殊配置？

我来解答赞 7 收藏

反馈

1 条解答

开发者英歌 Lv1

Vue的响应式系统无法检测到对象属性的动态添加，你得先初始化 user.profile.email。改一下data：

data() {

  return {

    user: {

      profile: {

        email: ''

      }

    }

  }

}

或者用 this.$set 手动设置属性也行。就这样。

2026-02-17 09:01