vuejs - v-model 不更新类属性

Posted 2023-02-16

【中文标题】vuejs - v-model 不更新类属性

【英文标题】：vuejs - v-model doesn't update class property

【发布时间】：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。