问题标签 [vue-material]

背景

我将一组对象传递给可以在此处找到的材料自动完成。

当我第一次在列表中选择一个项目时，它会引发错误，然后如果我再次单击该项目，它会按预期选择它。每次单击自动完成中的项目时，都会重复相同的过程。

示例错误

[Vue 警告]：“输入”的事件处理程序出错：“TypeError：无法读取未定义的属性‘构造函数’”

示例代码

数据示例

问题

这个错误是什么意思，我该如何解决？我读过几年前通过这个错误从材料中使用自动完成的角度存在一个错误，但我乐观地认为这目前是可修复的，而不是材料 vue 的错误。

我使用生成一个项目vue-cli，然后运行vue add vue-material​​. 然后我添加 MdButton 并在浏览器中检查

然后我添加 MdIcon 并在浏览器中检查

编译成功，但是浏览器出现错误

Uncaught (in promise) 文件 /assets/icons/svg/telegram.svg 不是有效的 SVG。

svg 绝对有效！怎么修？

当窗口变小时，我试图隐藏 vue 材料中的表格列。

像这样：

但正如您在此代码沙箱中看到的那样

https://codesandbox.io/s/zz6v9j7vm4

即使行消失，“职位”列仍然存在。

我怎样才能让行标题消失？

我想在我的 Vue 项目中使用 vue-material 选项卡作为我项目中的主要导航元素。标准选项卡（https://vuematerial.io/components/tabs/）似乎已经具有该功能。

遗憾的是，我并没有真正了解我现在使用的普通 vue 路由器和 vue-material 示例中的自动路由之间的链接。

我的老App.vue样子是这样的：

现在我会将模板更改为类似的内容：

在我的视图路由器中，“/home”和“/jobs”是我现在正在运行的路由。但这不起作用。我还尝试了类似于 vue-material 文档中的示例的“/components/Home.vue”。

我得到的错误是：

我希望你能告诉我我哪里错了。可能是我在“to”参数的“to”参数中导航到了错误的路径，<md-tab>或者我使用 Vue 路由器执行了我不应该使用 vue-material 执行的操作。

我有以下...

但是当我尝试运行时，它并没有隐藏。我仔细检查了该课程是否正在添加。

如何让隐藏工作？

所以我正在尝试建立一个包含 4 个文件的网站。vue（navigation.vue、Home.vue、something1.vue something2.vue）每个文件都有自己的模板和样式。在 navigation.vue 我有一个临时抽屉，以便在每个文件上导航 vue。
（临时抽屉的文档：https ://vuematerial.io/components/drawer （我使用的是 Vue 材料）我使用了相同的代码）。

在我的抽屉里，我确实有 md-toolbar、md-drawer 和 md-content 标签（它创建了我的导航菜单：

所以，我想知道他们是否可以将我的一个模板（通过单击 md-drawer 中的项目列表）加载到 md-content 标签中？

背景：我有一个 Vue CLI 项目，由两个主要部分组成：1）客户看到的内容和 2）管理员看到的内容。客户部分使用 Bootstrap CSS，另一部分使用 Vue Material。尽管我打算将 Vue Material 部分重写为 Vuetify，但问题很可能仍然存在。

问题： Bootstrap CSS 与 Vue Material CSS 冲突。当 Bootstrap CSS 应用于 Vue Material 部分时，它看起来很乱。反过来也是；当 Vue Material CSS 应用于 Bootstrap 部分时，它看起来很乱。

有什么办法可以使这项工作？

这个 Vue 项目曾经被封装在一个 Laravel 项目中，大量使用 Laravel Mix。然后我可以使用混合文件将所有 Bootstrap CSS 编译成 1 个包。此捆绑包将在索引页面中使用此行引用：

在 Vue 中使用两个布局组件，然后我可以像这样切换样式表：

这可能不是一个很好的解决方案，但它确实有效。也适用于大多数浏览器。

但是，我现在使用 Vue CLI 而不是 Laravel 和 Laravel Mix。这意味着我不能再轻易地命名生成的输出了。

我已经尝试过使用 CSS 深度选择器：/deep/& >>>。但这并不完全有效，因为 bootstrap 还将样式设置为:root, html&body元素。因此，当在作用域 CSS 中使用深度选择器时，不会应用这些样式，因为最终结果将是这样的：

上述方法不起作用，因为身体不是 the 的孩子，customers-container而是相反。

我觉得可能有一个使用包名称或块名称或来自 Webpack 或 Vue 配置的其他东西的解决方案。但是我的 Webpack 知识不足以自己解决这个问题，而且我似乎无法在网上找到答案。

我试图在 vue 材料上使用选项卡来拥有几个选项卡，当用户单击它时，它们将在同一页面中切换。目前第一个选项卡显示内容，但是当我点击其他选项卡时，它只显示为空。

编辑：我还添加了 vue 材料示例https://codesandbox.io/s/48m3qrvmo4?module=App.vue

当我运行这个命令时......

它似乎在我的应用程序中安装并覆盖了一些导致 css 冲突的 css。我必须搜索并找到确切的 css 并直接在特定的 vue 组件部分覆盖它。

在安装 NPM 软件包时，有没有办法防止这种情况发生？

技术用途：

• Vue.js
• 网页包
• 材料-vue

单击按钮时，我想将 Vue 材质对话框定位在按钮下方。该按钮位于嵌套的 iframe 内。因此，按钮的 x,y 坐标与视口坐标不匹配。有没有办法相对于元素定位 Vue md-dialog。我不能使用 css 使用 x 和 y 坐标，因为 iframe 太多，并且很难计算精确的 x,y 坐标，即使使用 element.getBoundingClientRect() 也是如此。