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

Question

我在其他Rails应用程序中有一些Vue组件，我注意到mounted()生命周期钩子在不同时间触发，具体取决于我是否使用该组件路由到页面，或者我已经在页面上并刷新浏览器。

这很重要，因为我在DOM中有一些$refs变量，我需要在组件初始化时使用。

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

此功能在页面刷新时成功执行，但在我路由时会抛出以下错误：

未捕获的TypeError：无法读取未定义的属性“dataset”

当它显然在DOM中时：

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

我知道这与时间有关，但我不确定如何解决这个问题。

Answer 1

我能够使用jQuery下拉信息：

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