javascript - 将 Material 设计与 VueJS 结合使用

标签 javascript vue.js material-design material-design-lite vue-router

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

我找到了material-design-lite (www.getmdl.io),但我无法让它与vue-router一起正常工作。

我的第一页正确显示,但当我尝试移动到另一个页面时,出现此错误:

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 ),但我无法弄清楚并解决我的问题。

否则,我找不到 vue 的示例来解决这个问题。

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

谢谢, 朱尔斯。

最佳答案

一些元素是在 MDL 的 componentHandler 运行后由 Vue 插入的,因此您必须重新启动它们。您可以在已安装的 Hook 中执行此操作:

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

关于javascript - 将 Material 设计与 VueJS 结合使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43448649/

相关文章:

android - 如何在android中实现 'Data Tables'( Material 设计组件)?

javascript - 获取计算样式并省略默认值

javascript - 设置 Jekyll 站点

javascript - 请求的资源上不存在 'Access-Control-Allow-Origin' header 。 Origin 'https ://myappurl. com 因此不允许访问

android - 如何在Android应用中创建这种类型的UI?

android - 使用 v7 ActionBarDrawerToggle 从右到左抽屉导航

java - 哪个版本的 ipad 操作系统支持 ckeditor...?

javascript - 如何修复 IE11 中请求 header 内容类型缺失的问题 | Angular 8 应用程序

javascript - 在 vuejs 中包含一个外部 css 文件

vue.js - 使用 vuejs 中的计算属性将数据从子级传递到父级