Vue.js - Material Design Lite 组件不会自动升级，除非刷新答案

【问题标题】：Vue.js - Material Design Lite components not upgraded automatically unless refreshedVue.js - Material Design Lite 组件不会自动升级，除非刷新
【发布时间】：2017-10-11 04:53:28
【问题描述】：

我在我的 Vue.js 项目中使用 Material Design Lite 组件。当我在另一个页面上重定向时，我的 UI 似乎已损坏，如下所示：

但是当我刷新它时，它有点固定，看起来应该是这样的：

我检查了控制台，在 elements 部分发现了一些奇怪的东西。代码行（以蓝色突出显示）在刷新之前看起来像这样

..刷新后变成这样：

似乎当我刷新页面时，组件升级了。但是，当我单击链接并重定向到该页面时，它不会自动升级。我该如何解决这个问题？我不想每次进入新页面时都按 F5

【问题讨论】：

标签： html css vue.js material-design vuejs2

【解决方案1】：

尝试将其添加到您创建的钩子中：

created() {
  this.$nextTick(() => {
    componentHandler.upgradeDom();
    componentHandler.upgradeAllRegistered();
  });
}

我不得不用它来修复一些 MDL 组件的动画。

【讨论】：

我认为它可以放在 main.js 或根组件中，但它需要放在 每个组件的 created life hook 中才能工作。谢谢顺便说一句
很高兴知道，我记得我是如何绞尽脑汁想弄清楚为什么 MDL 的文本输入组件不起作用的，所以我很高兴能提供帮助。顺便说一句，谷歌似乎放弃了 MDL，现在创造了一些新的东西：material.io
谢谢！起初我必须使用window.componentHandler 来访问它。我试过beforeMount() { this.$nextTick(() => { window.componentHandler.upgradeElement(this.$el); }); } 但没有效果。现在我把它放到 App.vue 中，它适用于我的所有视图：` watch: { $route(to, from) { this.$nextTick(() => { window.componentHandler.upgradeDom(); window.componentHandler .upgradeAllRegistered(); }); } } `

【解决方案2】：

为了将 VueJS 用作单页应用程序或刷新更少功能，您需要添加一个方法来更新在 v-for 循环中显示的数据对象。

在methods 下添加另一个函数来获取更新的数据，然后在 promise 上调用另一个函数来设置更新的数据。

例如

  methods: {
    getUpdatedData: function (data) {
     //
    },
    setUpdatedData: function (data) {
     //
    },
  }

然后让 getUpdatedData(data) 由您的事件触发或直接使用v-on

https://vuejs.org/v2/guide/events.html

https://vuejs.org/v2/guide/events.html#Method-Event-Handlers

https://vuejs.org/v2/guide/list.html

【讨论】：