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 中使用 <template>...</template> 关键字来访问数据、道具或方法。

in this case you can also trim the title if you want。这是模板部分：

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

如何解决：[Vue警告]：开机处理程序中的错误：“ TypeError：null不是对象”。事件处理程序变得疯狂

2 个答案: