Javascript Vue.js变量变为未定义

我用Typescript在Vue.js中编写了这篇文章，我不明白为什么在startogin（）中更改错误变量后，它会变成未定义的。我以前曾试图直接在startogin（）中更改字符串，但它仍然没有定义。谢谢你的帮助，我花了好几个小时盯着这个。如果我在startogin（）中使用console.log，则错误变量的值是正确的，但当我在其他任何地方使用它时，它是未定义的

从“/App.vue”导入应用程序；
从“/router”导入路由器；
从“/store”导入存储；
导入“/registerServiceWorker”；
从“Vue属性装饰器”导入{Component，Prop，Vue}；
@组成部分
导出默认类登录扩展Vue{
错误：数字；
用户名：字符串；
密码：字符串；
构造函数（）{
超级（）；
这个错误=0；
this.username=“”；
此密码为“”；
}
startogin（）：void{
if（this.$data.username！=“”&this.$data.password！=“”）{
如果（此.$data.username==“michaela”）{
此.$emit（“已验证”，真）；
新Vue({
路由器，
商店，
渲染：h=>h（应用程序）
}).$mount（“#login”）；
}否则{
这是。$data.error=1；
}
}否则{
这个.$data.error=2；
}
}
获取errorMsg（）{
console.log（这是$data.error）；
if（this.$data.error==0）{
返回“请输入您的用户名和密码”；
}else if（this.$data.error==1）{
返回“用户名或密码不正确”；
}else if（this.$data.error==2）{
返回“用户名和密码都必须存在”；
}
}
}

#登录{
字体系列：“Avenir”，Helvetica，Arial，无衬线；
-webkit字体平滑：抗锯齿；
-moz osx字体平滑：灰度；
文本对齐：居中；
颜色：#2c3e50；
边缘顶部：60像素；
}
h1{
字体大小：30px；
填充：0；
}
形式{
颜色：#2c3e50；
颜色：白色；
填充：0；
保证金：自动；
宽度：300px；
}
表格h1{
保证金：自动；
颜色：#2c3e50；
}
输入、选择、文本区域{
显示：内联块；
宽度：70%；
填充：16px20px10px10px；
边界：无；
背景色：浅海绿色；
颜色：白色；
保证金：自动；
}
输入{
高度：10px；
字体大小：15px；
}
文本区{
高度：30px；
}
标签，表格p{
显示：块；
保证金：10px 0px 0px 0px；
}
形式，按钮，按钮{
高度：30px；
宽度：80px；
文本对齐：居中；
填充：0；
背景色：浅海绿色；
边界：无；
颜色：白色；
保证金：自动；
}
：：占位符{
颜色：白色；
}
.错误{
颜色：红色；
}

登录
{{{errorMsg}



提交

您可以编写以下内容：

<button type="button" v-on:click="error = startLogin()">Submit</button></p>

提交

因此，基本上您希望函数

startogin（）

返回一个数值。
但是，在当前实现中，

startogin（）

没有返回值（即：

startogin（）：void

）。

---

为了定义

error

变量，那么，您应该让

startogin（）

返回

error

值，或者避免执行

error=startogin（）

赋值。

如果使用

this.$set（this.$data，'error'，1）

来分配错误会发生什么？小提示，您不必使用此。$数据来访问这些属性。写下这个。错误。我的问题是，为什么要在html模板代码中指定

error=startogin（）

<代码>startogin（）返回值未定义。也许这就是为什么单击按钮时错误也未定义。是的，您正在分配一个未定义的错误，因为startogin（）没有返回，请删除

v-on:click=“error=startogin（）”

中的

error=

，并将其设置为

v-on:click=“startogin（）”