vuejs - v-model 不更新类属性

【问题标题】：vuejs - v-model doesn't update class propertyvuejs - v-model 不更新类属性
【发布时间】：2021-11-29 13:59:51
【问题描述】：

我的表单和 v-model 存在问题，无法更新我的班级属性

为了快速说明，这里是我所期望的不正常的基本示例

<input placeholder="Title" 
  v-model="title"
  type="text">
<button @click="send">send</button>

@Component
export default class Home extends Vue {
  public title = ''

  send = async(): void => {
    console.log(this.title)
  }
}

console.log 打印默认属性值（空字符串），当我在输入中键入内容时不会更新

【问题讨论】：

【解决方案1】：

实际上title 的值是响应式的，并由用户输入更新。根据 vue 类组件文档，当您要访问 this 时，不应在类组件中使用箭头函数：

如果将箭头函数定义为类属性并在其中访问 this，它将不起作用。这是因为这只是初始化类属性时Vue实例的代理对象

所以这将起作用并且在控制台中记录了正确的值：

@Component
export default class Home extends Vue {
  public title = ''

  send(): void {
    console.log(this.title)
  }
}

更多详情请访问this page。

【讨论】：