Vue.js - Material Design Lite组件未自动升级，除非刷新

Question

我在 Vue.js 项目中使用 Material Design Lite 组件。当我在另一个页面上重定向时，我的UI似乎被破坏了，看起来像这样：

但是当我刷新它时，它有些修复并且它看起来像应该是：

我检查了控制台，发现元素部分有些奇怪。代码行（以蓝色突出显示）在刷新之前就是这样的

..并且在刷新之后变得像这样：

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

Answer 1

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

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

我必须使用它来修复某些MDL组件的动画。

Answer 2

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

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

e.g。

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

然后让您的事件触发getUpdatedData（数据）或直接与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