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 变量变为未定义的主要内容,如果未能解决你的问题,请参考以下文章

vue.js 的 Laravel 未定义变量异常

Vue.js 变量在传递给另一个组件后未定义

Vue 3 组合 API,未定义变量,生命周期

Vue 组件:props 未定义

Vue.js 道具未定义

如何解决“未捕获的类型错误:无法读取未定义的属性'get'”? (Vue.JS 2)