<template>
<div>

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">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>
  <p> Got it, go to see DSN directory </p>
  <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)