How to pass method returned value to another component

Hi, I have a method in a login component which returns boolean value, how can I get that value in another component. Basically, I want to toggle the dropdown menu in component 2 based on the returned value. Please advise. Thanks

Component 1:

<template>

<form class="form-signin">
  <h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
  <label for="inputEmail" class="sr-only">Email address</label>
  <input type="email" id="inputEmail" v-model="input.username" class="form-control" placeholder="Email address" required >
  <label for="inputPassword"  class="sr-only">Password</label>
  <input type="password" id="inputPassword" v-model="input.password" class="form-control" placeholder="Password" required>
  <div class="checkbox mb-3">
    <label>
      <input type="checkbox" value="remember-me"> Remember me
    </label>
  </div>
  <button class="btn btn-lg btn-primary btn-block" type="submit" v-on:click="login()">Sign in</button>
  <p class="mt-5 mb-3 text-muted">&copy; 2019-2020</p>
</form>
</template>

<script>
import loginData from "../data/login.json";
export default {
  data(){
    return { 
      input:{
        username:"",
        password:""
      }
    }
  },
  methods:{
    login(){
      this.logintype = false;
      if(this.input.username !="" && this.input.password !=""){
        loginData.loginList.forEach(x => {
             if (x.username == this.input.username && x.password== this.input.password){
               console.log ("username: "+x.username,"password: "+x.password)
               console.log("login successful");
               this.logintype = true
             }
        })
        if(!logintype){
                console.log("login failed");
        }
        return logintype;
      }
    }
  }
}
</script>

Component 2 :

 <template>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
        <a class="navbar-brand" href="#">People's Park</a>
            <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Matches</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Lists</a>
            </li> 
            <li class="nav-item">
                <a class="nav-link " href="#">Messages</a>
            </li>
            </ul>
             <div class="dropdown">
                <a class="dropdown-toggle text-light">
                    Welcome User
                </a>

                <div class="dropdown-menu">
                    <a class="dropdown-item" href="#"><i class="fa fa-user"></i> Profile</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#"><i class="fa fa-sign-out"></i>Logout</a>
                </div>
            </div>


</nav>
</template>
<script>
export default {
    
}
</script>

You can use the Vuex store to store the boolean state to a variable and check for that state using the created or mounted life-cycle hook when loading the other component.

Hi, actually, I tried both Vuex and custom event to pass the value to the component 2 and display the dropdown based on the boolean value, it never worked for me, please advise.

<template>

<form class="form-signin">
  <h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
  <label for="inputEmail" class="sr-only">Email address</label>
  <input type="email" id="inputEmail" v-model="input.username" class="form-control" placeholder="Email address" required >
  <label for="inputPassword"  class="sr-only">Password</label>
  <input type="password" id="inputPassword" v-model="input.password" class="form-control" placeholder="Password" required>
  <div class="checkbox mb-3">
    <label>
      <input type="checkbox" value="remember-me"> Remember me
    </label>
  </div>
  <button class="btn btn-lg btn-primary btn-block" type="submit" v-on:click="login()">Sign in</button>
  <p class="mt-5 mb-3 text-muted">&copy; 2019-2020</p>
</form>
</template>

<script>
import loginData from "../data/login.json";
export default {
  data(){
    return { 
      input:{
        username:"",
        password:""
      },
      loginType:Boolean
    }
  },
  methods:{
    login(){
      if(this.input.username !="" && this.input.password !=""){
        loginData.loginList.forEach(x => {
             if (x.username == this.input.username && x.password== this.input.password){
               console.log ("username: "+x.username,"password: "+x.password)
               console.log("login successful");
               this.loginType = true;
               this.$emit('setloginType',this.loginType)
               console.log (this.loginType)
             }
        })
        if(!this.loginType){
                console.log("login failed");
                this.loginType = false;
                this.$emit('setloginType',this.loginType)

        }
      }
    }
  }
}
</script>



<style scoped>
.form-signin {
  width: 100%;
  max-width: 330px;
  padding: 15px;
  margin: auto;
}
.form-signin .checkbox {
  font-weight: 400;
}
.form-signin .form-control {
  position: relative;
  box-sizing: border-box;
  height: auto;
  padding: 10px;
  font-size: 16px;
}
.form-signin .form-control:focus {
  z-index: 2;
}
.form-signin input[type="email"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
</style>

component 2 :

<template>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
        <a class="navbar-brand" href="#">People's Park</a>
            <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Matches</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Lists</a>
            </li> 
            <li class="nav-item">
                <a class="nav-link " href="#">Messages</a>
            </li>
            </ul>
             <div class="dropdown" v-if = "loginType==true">
                <a class="dropdown-toggle text-light">
                    Welcome User
                </a>

                <div class="dropdown-menu">
                    <a class="dropdown-item" href="#"><i class="fa fa-user"></i> Profile</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#"><i class="fa fa-sign-out"></i>Logout</a>
                </div>
            </div>

            <form class="form-inline my-2 my-lg-0" v-if = "loginType==false">
                <input class="form-control mr-sm-2" type="text" placeholder="Username" >
                <input class="form-control mr-sm-2" type="Password" placeholder="Password" >
                <button class="btn btn-success my-2 my-sm-0" type="submit">Login</button>
            </form>
</nav>
</template>
<script>
export default {
    props:['loginType']
    
}
</script>

An alternative to using a store you can in your App.vue component have a data/state object like {user: {isLoggedIn: false, username: ""}} and pass it as a prop to all other components. That way all components can both read and change (reactively) isLoggedIn and username.

1 Like