如何修复：[Vue 警告]：v-on 处理程序中的错误：

Question

“this.cameraPage”正确填充了文本输入，但是一旦我开始在输入字段中进行更改，Vue 事件处理程序就会抱怨 this.cameraPage 为空

"this.cameraPage" 是一个对象，并通过 JSON API 在 "created()" 中初始化。它成功加载，我可以根据需要使用该对象进行显示。

数据

data() {

    return {

        cameraPage: {},

}

创建

async created() {

    let cameraPage = await this.$http.get('http://localhost:3001/api/v1/camera/' + this.keyColumn + '.json')

    this.cameraPage = JSON.parse(JSON.stringify(cameraPage)).data

}

HTML

<input type="text" v-model="this.cameraPage.title"/>

我是 Vue 的初学者，我没有故意向 Input-text 字段添加事件处理程序，所以我猜这是一些“Vue-Magic”。当我真的不知道会发生什么时，我很难解决问题。

Answer 1

我现在知道在访问模板中的属性时不需要引用“this”。我删除了关键字，一切又开始工作了。

Answer 2

您不需要使用this关键字 in<template>...</template>来访问数据、道具或方法。在这种情况下，您还可以根据需要修剪标题。这是模板部分：<input&nbsp;type="text"&nbsp;v-model.trim="cameraPage.title"/>