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

时间:2017-10-11 04:53:28

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

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

enter image description here

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

enter image description here

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

enter image description here

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

enter image description here

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

2 个答案:

答案 0 :(得分:4)

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

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

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

答案 1 :(得分:0)

为了利用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