如何在 Vue 中的每个路由上重新初始化一个包？

Question

我找到了一个 tool for table management，我很喜欢。唯一的问题是它需要如下所示进行初始化，这意味着它只会被调用一次 - 当页面被加载时。

mounted: () => {
  $(document).ready(function () { 
    $("table").DataTable();
  }
}

我把代码放在 mounted 部分，我也尝试使用 created。出于某种原因（可能是渲染顺序），我必须将其保存在 ready 方法中 - 否则它不会出现。

这给我带来了两个问题。首先，我在多个组件中重用相同的组件作为矩阵视图（它是根据商店动态设置的）。其次，当我从页面导航然后返回时，它不会重新初始化。

每次组件进入视图时，我应该如何将 ready 方法中的代码设为运行？

我用谷歌搜索了一下，但这不是一个常见的问题，而且我的弹药用完了。我得到的最好的结果是 the life cycle of the component where I couldn't see anything ground breaking. I also found that the data table instance needs to be destroyed 但这只有在我调用这些东西时才有帮助，这似乎不会发生。

Answer 1

我相信你只需要做到以下几点：

mounted () {
    $("table").DataTable();
}

as $(document).ready detects that the document is ready, but in vue case, mounted是在实例刚挂载后调用的，其中el被新创建的vm.$el替换，应该等价于document.ready.

我还在 vue 2.x.x 中检查过，如果您从页面导航然后返回，mounted 会被调用。

如果此代码依赖于正在加载的数据和组件的重新渲染，您可以使用 updated 而不是在数据更改导致虚拟 DOM 重新加载后调用的 mounted -渲染和修补。

updated () {
    $("table").DataTable();
}

如何在 Vue 中的每个路由上重新初始化一个包？

How to reinitialize a package on each routing in Vue?

javascript

datatables

vue.js

bootstrap-4

vue-router