< template > 
 
<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="-sharp">ESN</a>
    </div>
    <button type="button" class="btn btn-default navbar-btn pull-right" v-on:click="logout()">
      Logout
    </button>
  </div>
</nav>
<div class="weclome-msg" v-show="showWelcomeMessage">
  <h1> Welcome {{ username }} to User home!!!</h1>
   Got it, go to see DSN directory 
  <button v-on:click="seeDSNDir()">Yes</button>
</div>
<esndir v-show="showESNDir">
</esndir> < / div > 
 < / template > 
 < script > 
 import {setCookie, getCookie} from". / assets/js/cookie.js" 
 import esndir from"@ / components/esndir" 
 import axios from "axios" 
 import io from" socket.io-client" 
 export default {
 data () {
return {
  username: "",
  showWelcomeMessage: true,
  showESNDir: false
}}, 
 mounted () {
let cookieUsername = getCookie("username")
let _this = this
this.username = cookieUsername
if (cookieUsername === "") {
  this.$router.push("/login")
}
this.socket = io.connect("http://localhost:3000")
this.socket.emit("userLogin", this.username)
this.socket.on("updateUser", function () {
  _this.$ref.esndir.getCitizens()
})}, 
 methods: {
seeDSNDir () {
  this.showWelcomeMessage = false
  this.showESNDir = true
},
logout () {
  let _this = this
  axios.post("/apis/users/logout", {
    params: {
      username: _this.username
    }
  })
    .then(function (response) {
      console.log(response)
      if (response.status === 200) { // remove current cookie
        _this.socket.emit("userLogout")
        setCookie("username", "", -1)
        _this.$router.push("/")
      }
    })
    .catch(function (error) {
      console.log(error)
    })
}}, 
 components: {
esndir} 
} 
 < / script > 
user.vue?9c2f:46 Uncaught TypeError: Cannot read property "esndir" of undefined
at Socket.eval (user.vue?9c2f:46)