【问题标题】: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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2016-07-15
      • 1970-01-01
      • 1970-01-01
      • 2018-01-25
      相关资源
      最近更新 更多