在VueJS中使用材质设计 [英] Using material design with VueJS

问题描述

我正在使用VueJs构建Web应用程序，并且需要一个CSS框架来设计一些内容，而不是从头开始！

I'm building a web app with VueJs and need a css framework to design something not from scratch!

我找到了material-design-lite(www.getmdl.io)，但是我无法使其与vue-router一起正常工作.

I found material-design-lite (www.getmdl.io) but i couldn't make it work properly with vue-router.

我的第一页显示正确，但是当我尝试移至另一页时，出现此错误:

My first page is correctly displayed but when i try to move to another page, i have this error :

vue.esm.js?65d7:467 DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.

我认为这是因为文档中的在动态网站上使用MDL"( https://getmdl.io/started/index.html )，但我无法解决并解决我的问题.

I thought it was because of the "Use MDL on dynamic websites" from the docs (https://getmdl.io/started/index.html) but i couldn't figure it out and solve my problem.

否则，我找不到用vue解决问题的例子.

Otherwise, i couldn't find examples with vue to solve this.

有人知道如何使vdl与mdl一起使用吗?

Does someone know how to make mdl work with vuejs ?

谢谢， 朱尔斯.

推荐答案

在MDL的componentHandler运行之后，Vue插入了一些元素，因此您必须重新启动.您可以在安装的挂钩中执行此操作:

Some elements are inserted by Vue after MDL's componentHandler has run, so you must restart them. You can do this in the mounted hook:

mounted: function(){
    componentHandler.upgradeAllRegistered();
}

这篇关于在VueJS中使用材质设计的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！