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

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

框架

在用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>

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

我来解答赞 15 收藏

反馈

2 条解答

打工人东辰 Lv1

Vue2里给对象动态加属性不会触发响应式更新，你得提前把属性定义好。直接这样改：

data() {

  return {

    user: {

      profile: {

        email: ''

      }

    }

  }

}

或者用Vue.set(this.user.profile, 'email', '')初始化（Vue2特有）。Vue3的话没问题，但你这写法明显是Vue2项目。

2026-02-27 10:11

开发者英歌 Lv1

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

data() {

  return {

    user: {

      profile: {

        email: ''

      }

    }

  }

}

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

2026-02-17 09:01