Trying to work on Laravel Echo for chat application. I am following laracast video "Get Real With Laravel Echo". Below error in my console.
[Vue warn]: Error compiling template:Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as , as they will not be parsed.(found in )
[Vue warn]: Error in created hook: "TypeError: Cannot read property 'Channel' of undefined"found in---> at resources\assets\js\components\TaskList.vue
TypeError: Cannot read property 'Channel' of undefined at ueComponent.created (VM12660 app.js:47336) at callHook (VM12660 app.js:38848)
GET http://localhost/tasks 404 (Not Found)
VM12660 app.js:13822 Uncaught (in promise) Error: Request failed with status code 40 at createError (VM12660 app.js:13822) at settle (VM12660 app.js:35254)
Route file routes/web.php
Route::get('/tasks', function (){
return Task::latest()->pluck('body');
});
Route::get('/tasks', function (){
$task = Task::forceCreate(request(['body']));
event(new TaskCreated($task));
});
TaskList.vue file
<template>
<ul>
<li v-for="task in tasks" v-text="task">
</li>
</ul>
<input type="text" v-model="newTask" @blur="addTask">
</template>
<script>
export default {
data(){
return{
tasks: [],
newTask: ''
};
},
created(){
axios.get('/tasks').then(function(response){this.tasks = response.data});
window.Echo.channel('tasks');
},
methods: {
addTask() {
axios.post('/tasks', { body:this.newTask });
this.tasks.push(this.newTask);
this.newTask = '';
}
}
};
</script>
App.js file
require('./bootstrap');
window.Vue = require('vue');
Vue.component('task-list', require('./components/TaskList.vue'));
const app = new Vue({
el: '#app'
});
Welcome.blade.php file
<body>
<div id="app">
<task-list></task-list>
</div>
<script type="text/javascript" src="{!! asset('js/app.js') !!}"></script>
</body>
via Chebli Mohamed
Aucun commentaire:
Enregistrer un commentaire