在刷新页面之前，下拉菜单和模式在 Vue 组件中不起作用

Posted 2023-03-14

【中文标题】在刷新页面之前，下拉菜单和模式在 Vue 组件中不起作用

【英文标题】：dropdowns and modals not working inside Vue components until I refresh the page

【发布时间】：2017-12-29 06:55:19

【问题描述】：

我在 Laravel 5.4 中使用 Vue.js 一切都在 .blade.php 文件中工作，但不在 .Vue 文件中 当我单击下拉菜单或模式按钮时，什么也没有发生。 也许我不知道我在做什么，但奇怪的是当我刷新页面时一切正常。

有什么建议吗？？

【问题讨论】：

控制台中有消息吗？你能分享一些代码吗？

你编译过.vue文件吗？

@RoyJ 控制台中没有消息。

@Mohammadb 我不知道如何编译 .vue 文件。我还是新手，但我会谷歌它

npm run watch 监视 vue 文件以获取更新，它不监视刀片文件。

【参考方案1】：

我通过使用 Bulma CSS 框架而不是 bootstrap 解决了这个问题。

它提供了与 Vue.js 更好的集成。

这是框架文档的链接： Bulma CSS framework documentation https://bulma.io/documentation/overview/start/

【讨论】：

刚刚将 bootstrap 的标签替换为 Bulma 的标签，一切正常。您可以查看文档以了解如何使用 Bulma 制作下拉菜单或模式

【参考方案2】：

Writing Vue Components

您应该在每次更改 Vue 组件时运行npm run dev 命令。或者，您可以运行npm run watch 命令来监控并在每次修改组件时自动重新编译它们

还有另一种在你的 laravel 中使用 vue 的方法，你可以在这个链接中学习它：laravel 5 vue setup unclear