VUE.JS方法中的简单If返回

当方法返回true时，模板不会显示v-if

我可以在登录方法的else部分记录用户名密码和失败的尝试。如果我尝试记录loginFailed变量，则未定义我得到的loginFailed

<template>
<div class="container-big">
    <div class="container-header">
        <h1>Our Login</h1>
    </div>
    <p  v-if="loginFailed"> 
    Login Failed
    </p>
    <div id="loginContainer" class="container-login">
        <P>{{msg}}</p>
        <input id="login" type="text" placeholder="username" v-model="username" spellcheck="false" >
        <input id="key" type="password" placeholder="password" v-model="password" spellcheck="false" >
    </div>
    <div class="container-signin">
        <button  class="signin" id="go" @click="login()"></button>
    </div>
</div>
</template>
<script>
export default {
  name: 'Login',
  data () {
    return {
      msg: 'This is your login',
      password: '',
      username: '', 
      loginFailed: false
    }
  },
  methods: {
    login () {
      console.log(this.username);
      console.log(this.password);   
     if (this.username !== '' && this.password === 'pass') {
        this.$router.push( { name: 'dashboard', path: '/dashboard' }) }
      else {
        console.log('failed attempt')  
        this.loginFailed === true;
        return this.loginFailed
      }
    }
  }
}

</script>

我们的登录

登录失败

 {{msg}}
导出默认值{
名称：'登录'，
数据（）{
返回{
msg:'这是您的登录'，
密码：“”，
用户名：“”，
登录失败：false
}
},
方法：{
登录（）{
console.log（this.username）；
console.log（这个密码）；
如果（this.username！=''&&this.password==='pass'）{
这是.$router.push（{name:'dashboard'，path:'/dashboard'}）}
否则{
console.log（'尝试失败'）
this.loginFailed===true；
返回此文件。登录失败
}
}
}
}

我想做的是，如果登录失败显示

登录失败

在

login（）

方法中，当您实际应该为

loginFailed

属性赋值时，您正在执行比较：

this.loginFailed==true；

更改该行，使其实际将

true

分配给

此。loginFailed

：

this.loginFailed=true；

旁注：您很可能不需要从

login（）

返回任何内容，因为它只是处理实例属性，您可能需要删除这一行：

返回this.login失败

是的。我是在用比较，而不是把它设置为真。非常感谢。