简单的 If return 在 VUE.JS 方法中答案

【问题标题】：Simple If return in VUE.JS method简单的 If return 在 VUE.JS 方法中
【发布时间】：2019-09-03 17:12:07
【问题描述】：

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

我可以在登录方法的 else 部分记录用户名密码和失败的尝试。如果我尝试记录 loginFailed var，我会得到 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>

我想要做的是如果登录失败显示 <p v-if="loginFailed"> Login Failed </p>

【问题讨论】：

标签： vue.js

【解决方案1】：

在login() 方法中，当您实际应该为loginFailed 属性赋值时，您正在执行比较：

this.loginFailed === true;

更改该行，使其实际将true 分配给this.loginFailed：

this.loginFailed = true;

旁注：您很可能不需要从 login() 返回任何内容，因为它只是处理实例属性，您可能需要删除此行：

return this.loginFailed

【讨论】：

是的。我使用比较而不是设置它为真。谢谢