passing data from component to another component vue.js

Question

passing username from login.vue component to navbar.vue component but this code didn't shows me username in navbar. and gives me this error Property or method "username" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

found in

login.vue

<script>
 import axios from 'axios';
    export default {
    name: 'login',
    data() {
       return {
        email: '',
        password: '',
        logged : false,
        username : '',
        errorMsg : '',
     }
    },
   methods: {
     signIn: function () {
       axios.post('url', {
       email: this.email,
       password: this.password,
      },
   {
    headers: {

    }
  }
  )
  .then(response => {
    if(response.status == 200){
      setTimeout(function(){window.location.replace('url');
      }, 1500);
      this.logged = true;
      this.username = response.data.user.full_name;
      console.log(this.username);
    }
  })
  .catch(error => {
    this.errorMsg = '** Incorrect username or passrord **';
  });
}

navbar.vue that shows the fullname from login.vue

<script>
  import login from './Login'
  export default {
    name: 'NavBar',
    data() {
      return {
      username : username,
      }
    },
   components: {
    login
   },
 }
</script>

Answer 1

Vue event bus can help you in this situation. 1. create a event bus in your event-bus.js file like

import Vue from 'vue';
export const EventBus = new Vue();

2. create an event when login success in login.vue. like

    import { EventBus } from './event-bus.js' then(response => { if(response.status == 200){ setTimeout(function(){window.location.replace('url'); }, 1500); this.logged = true; this.username = response.data.user.full_name; EventBus.$emit('login', this.username); console.log(this.username); } }) 

3. Receiving Events in your navbar.vue

    import { EventBus } from './event-bus.js' \n\nEventBus.$on('login', user => { \n\n  console.log(user) \n}); \n

Search in google about Vue eventBus there are several tutorial about this.

You can use vuex to make authentication system.