Vue.js 变量变为未定义
Posted
技术标签:
【中文标题】Vue.js 变量变为未定义【英文标题】:Vue.js variable turns undefined 【发布时间】:2019-02-06 02:25:10 【问题描述】:我已经用 Typescript 在 Vue.js 中编写了这个,但我无法弄清楚为什么错误变量在 startLogin() 中更改后变为未定义。我之前尝试直接在 startLogin() 中更改字符串,但它仍然保持未定义。任何帮助表示赞赏,我已经花了几个小时盯着这个。如果我在 startLogin() 中执行 console.log,则错误变量具有正确的值,但是当我在其他任何地方使用它时,它是未定义的。
<script lang="ts">
import App from "./App.vue";
import router from "./router";
import store from "./store";
import "./registerServiceWorker";
import Component, Prop, Vue from "vue-property-decorator";
@Component
export default class Login extends Vue
error: number;
username: string;
password: string;
constructor()
super();
this.error = 0;
this.username ="";
this.password ="";
startLogin(): void
if(this.$data.username != "" && this.$data.password != "")
if(this.$data.username == "michaela")
this.$emit("authenticated", true);
new Vue(
router,
store,
render: h => h(App)
).$mount("#login");
else
this.$data.error = 1;
else
this.$data.error = 2;
get errorMsg()
console.log(this.$data.error);
if(this.$data.error == 0)
return "Please enter your username and password";
else if(this.$data.error == 1)
return "The username or password is incorrect";
else if(this.$data.error == 2)
return "Both username and password must be present";
</script>
<style lang="scss">
#login
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
h1
font-size: 30px;
padding: 0;
form
color: #2c3e50;
color: white;
padding: 0;
margin: auto;
width: 300px;
form h1
margin: auto;
color: #2c3e50;
input, select, textarea
display: inline-block;
width: 70%;
padding: 16px 20px 10px 10px;
border: none;
background-color: lightseagreen;
color: white;
margin: auto;
input
height: 10px;
font-size: 15px;
textarea
height: 30px;
label, form p
display: block;
margin: 10px 0px 0px 0px;
form .button, button
height: 30px;
width: 80px;
text-align: center;
padding: 0;
background-color: lightseagreen;
border: none;
color: white;
margin: auto;
::placeholder
color: white;
.error
color: red;
</style>
<template>
<div id="login">
<h1>Login</h1>
<p :class="'error' : error != 0">errorMsg</p>
<form>
<p><input type="text" name="username" v-model="username" placeholder="Username" /></p>
<p><input type="password" name="password" v-model="password" placeholder="Password" /></p>
<p><button type="button" v-on:click="error = startLogin()">Submit</button></p>
</form>
</div>
</template>
【问题讨论】:
如果您使用this.$set(this.$data, 'error', 1)
分配错误会发生什么?
小提示,您不必使用 this.$data 来访问这些属性。只写this.error。我的问题是,为什么要在 html 模板代码中分配 error = startLogin()
? startLogin()
返回值未定义。也许这就是为什么单击按钮时错误也未定义的原因。
是的,因为 startLogin() 没有返回值,所以您正在分配一个未定义,删除 v-on:click="error = startLogin()"
中的 error =
并使其成为 v-on:click="startLogin()"
【参考方案1】:
你写了以下内容:
<button type="button" v-on:click="error = startLogin()">Submit</button></p>
所以基本上你期望函数startLogin()
返回一个数值。
但是,在您当前的实现中,startLogin()
没有返回值(即:startLogin(): void
)。
为了定义 error
变量,您应该让 startLogin()
返回 error
值或避免执行 error = startLogin()
赋值。
【讨论】:
以上是关于Vue.js 变量变为未定义的主要内容,如果未能解决你的问题,请参考以下文章