dimanche 24 juin 2018

errors due to using Laravel Echo

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