Vue生命周期钩在rails应用程序中

Question

I have a few Vue components in my otherwise Rails app and I noticed that the mounted() lifecycle hook fires at different times, depending on whether I am routed to the page with the component or am already on the page and I refresh the browser.

It's important because I have some $refs variables in the DOM that I need on component initialization.

mounted: function() {
    let user = {
      user_type: parseInt(that.$refs.user.dataset.user_type),
      location_id: parseInt(that.$refs.user.dataset.location)
    }
}

This function executes successfully on page refresh, but throws the following error when I am routed there:

Uncaught TypeError: Cannot read property 'dataset' of undefined

when it is clearly in the DOM:

<div ref="user" data-user_type="<%= current_user.user_type %>" data-location="<%= current_user.employee.location_id %>"></div>

I know it has to do with timing, but am unsure how to remedy the issue.

Answer 1

I was able to pull down the information using jQuery:

let user = {
  user_type: $('[data-user_type]').data('user_type'),
  location_id: $('[data-user_type]').data('location')
}