Vue introduces component Cannot read property 'esndir' of undefined

< 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)
Jun.26,2022

mounted () change _ this.$ref.esndir.getCitizens () to $refs, not $ref

Menu