我在 Vue.js 项目中使用 Material Design Lite 组件。当我在另一个页面上重定向时,我的UI似乎被破坏了,看起来像这样:
但是当我刷新它时,它有些修复并且它看起来像应该是:
我检查了控制台,发现元素部分有些奇怪。代码行(以蓝色突出显示)在刷新之前就是这样的
..并且在刷新之后变得像这样:
似乎当我刷新页面时,组件已升级。但是,当我点击链接并重定向到该页面时,它不会自动升级。我该如何解决这个问题?每次进入新页面时我都不想按F5
答案 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