Vue.js中使用v-model无法更新类属性的问题如何解决？

问题原因 #

这个问题的核心是你声明的title类属性没有被Vue的响应式系统正确识别监听，v-model触发的更新没有同步到该属性上，常见触发场景分三类：

• 依赖包版本/导入错误：如果你使用的是Vue2生态的vue-class-component + vue-property-decorator类组件方案，错误导入装饰器、或者使用了不兼容的版本，都会导致直接声明的类属性不会被自动转换为响应式数据。
• Vue3类组件的响应式规则：Vue3原生不支持类组件写法，第三方维护的vue-facing-decorator等类组件库默认不会把普通类属性标记为响应式，需要额外加装饰器声明。
• 方法绑定的潜在问题：你用类字段箭头函数声明send方法，部分babel/ts编译配置下可能存在this绑定异常，导致读取的是初始化时的旧属性值。

解决方案 #

方案1：适配Vue2类组件写法 #

修改类属性声明方式，确保属性被识别为响应式：

import { Component, Vue } from 'vue-property-decorator'
@Component
export default class Home extends Vue {
  // 从data钩子声明响应式数据
  data () {
    return {
      title: ''
    }
  }
  // 改为普通类方法，避免this绑定问题
  async send () {
    console.log(this.title)
  }
}

方案2：适配Vue3类组件写法 #

如果你用的是Vue3 + vue-facing-decorator方案，给响应式属性加@Value装饰器即可：

import { Component, Vue, Value } from 'vue-facing-decorator'
@Component
export default class Home extends Vue {
  // 标记为响应式属性
  @Value
  public title = ''

  async send () {
    console.log(this.title)
  }
}

更推荐的替代方案 #

Vue官方已经不再维护类组件写法，直接使用Composition API可以完全避免这类问题，示例如下：

<script setup>
import { ref } from 'vue'
const title = ref('')
const send = async () => {
  console.log(title.value)
}
</script>
<template>
  <input placeholder="Title" v-model="title" type="text">
  <button @click="send">send</button>
</template>

内容的提问来源于stack exchange，提问作者Сорок два