logo标签列表

Vue组件未显示/更新

laravelvue.jsvuejs2vue-component
7
我可以帮您翻译成中文。这段内容是关于编程的，讲述了在使用 Laravel 5.4 时，Vue 组件无法显示/更新的问题。同时还提到了创建了一个新项目并在 web.php 中创建了一个名为 /chat 的路由。下面是 chat.blade.php 的内容。
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/app.css">
</head>
<body>
<div id="app">
<example></example>
<chat></chat>
</div>

<script type="text/javascript">
window.Laravel = { csrfToken: '{{ csrf_token() }}' };
</script>
<script src="js/app.js"></script>
</body>
</html>

这是 app.js

require('./bootstrap');
Vue.component('example', require('./components/Example.vue'));
Vue.component('chat', require('./components/Chat.vue'));

const app = new Vue({
el: '#app'
});

示例和聊天组件是一些基本的模板，我没有传递任何数据，只有纯文本。

Chat.vue

<template lang="html">
<div id="content">
    <h1>Messages</h1>
    <p>Message text</p>
    <small>Hiii</small>
</div>
 </template>

<script>
export default {
}
</script>

当我第一次运行php artisan时，一切正常。我尝试编辑Chat.vue中的一些文本，比如将“Hiiii”更改为Hello，但当我重新加载页面时，它不会改变，仍然保持原样。我尝试重启电脑，再次运行php artisan，以及我能想到的任何事情。 我尝试直接在chat.blade.php中放置一些Vue代码，然后它就可以工作了。看起来它没有检测到app.js和组件中的更改。 FYI，我甚至删除了Example.vue组件。它仍然出现在页面上。
我不知道Laravel在底层做了什么以及它如何编译东西，但我认为php artisan没有处理Javascript的功能。 您是否尝试在编辑文件后运行“npm run dev”？ - Belmin Bedak
你也可以使用npm run watch，这样文件就会在更改时重新编译，从而节省所有后续请求的初始开销。 - Rwd
现在它可以工作了，谢谢！ - Vedran Korponajić
5个回答
9

解决此问题的最佳方法是更新npm，因为它将更新所有软件包并安装缺失的软件包，这样您就可以使用laravel mix编译资产了；目前您无法这样做。

npm update

对于一些人，更简便的方法是运行watch-pol命令。

npm run watch-poll
4
您尝试清除浏览器缓存了吗？这应该可以解决问题。
1
大家好，我刚刚找到了答案，想和大家分享。 问题：我正在学习Vue js，每天需要删除浏览器历史记录才能看到我在编辑器中所做的更改。我搜索了一下，没有找到有价值的答案。但是现在我已经找到了解决方案，所以我决定与大家分享。 你需要做的就是： 1）进入开发者工具。 2）点击网络选项卡。 3）点击禁用缓存（请参考下面图片中的突出部分）。 4）再次刷新页面！ enter image description here
0
有时候从互联网上复制代码时，我们会添加一些不必要的行。 只需检查 App/Config/app 中的此行。 确保它处于开发模式。
'env' => env('APP_ENV', 'development'),
-6

将此代码复制到 app.blade.php 文件中：

const app = new Vue({
el: '#app'
});
这并没有解释为什么它能够工作，也没有说明它是如何工作的，请添加更多有关解决方案的信息。 - avn
请解释您的解决方案，而不是直接编写代码。 - Hasnat Safder
代码已经在app.js中了，那他为什么还需要将它添加到blade文件中呢..！ - Urja Satodiya
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接