Vue Components not showing/updating

删除回忆录丶 提交于 2020-04-14 07:48:29

问题


I am working in Laravel 5.4, and Vue components are not showing/updating. I start a new project and create a route /chat in web.php

This is 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>

This is app.js

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

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

Example and Chat components are some basic templates, I am not passing any data, just plain text.

Chat.vue

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

<script>
export default {
}
</script>

When I run php artisan for the first time, everything works. I try to edit some text in Chat.vue, like change 'Hiiii' to Hello, when I reload the page it won't change, it just stays the same. I tried restarting the pc, running php artisan again, anything I could think of. I tried putting some Vue code directly in chat.blade.php, and than it works. It looks like it is not detecting changes in app.js and components. FYI, I even deleted the Example.vue component. It still appeared on the page.


回答1:


The best way to solve this problem is to update npm because it will update all the packages and install missing packages, as a result you will have laravel mix compiling your assets; right now you are not able to do so.

npm update

For some people an easier solution can work which is to run the watch-pol command

npm run watch-poll



回答2:


Have you tried to clear browser cache? This should solve the problem.




回答3:


copy this code in app.blade.php :

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


来源:https://stackoverflow.com/questions/42890072/vue-components-not-showing-updating

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!