Question

我尝试使用Laravel echo制作任务应用（仅用于检查Laravel回声）。（我使用Laravel 5.3）

但我有2个错误，我无法解决。在我的控制台中，我收到以下内容：

我正在使用webpack。

我的组件：

<template>
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <div class="panel-heading">Example Component</div>

                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Task">
                        <button type="button" class="btn" @click="store()">Button</button>
                    </div>

                    <ul v-for="task in tasks">
                        <li>{{ task.name }}</li>
                    </ul>    
                </div>
            </div>
        </div>
    </div>
</template>

<script>

import Vue from 'vue';
import Echo from "laravel-echo"

    export default {
        ready() {
            this.getAll();
            this.listen();
        },

        data() {
            return {
                tasks: {}
            };
        },

        methods: {
            store() {
                alert('df');
            },

            getAll() {
                Vue.http.get('/api/all')
                    .then(({data}) => {
                        this.tasks = data.tasks
                      }, (error) => {
                        console.log(error);
                    });
            },

            listen() {
                Echo.channel('test')
                    .listen('TaskCreated', event => {
                        this.tasks.push(event.task);
                    });
            }
        }
    }
</script>

App.js：

/**
 * First we will load all of this project's JavaScript dependencies which
 * include Vue and Vue Resource. This gives a great starting point for
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the body of the page. From here, you may begin adding components to
 * the application, or feel free to tweak this setup for your needs.
 */

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

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

bootstrap.js：

window._ = require('lodash');

/**
 * We'll load jQuery and the Bootstrap jQuery plugin which provides support
 * for JavaScript based Bootstrap features such as modals and tabs. This
 * code may be modified to fit the specific needs of your application.
 */

window.$ = window.jQuery = require('jquery');
require('bootstrap-sass');

/**
 * Vue is a modern JavaScript library for building interactive web interfaces
 * using reactive data binding and reusable components. Vue's API is clean
 * and simple, leaving you to focus on building your next great project.
 */

window.Vue = require('vue');
require('vue-resource');

/**
 * We'll register a HTTP interceptor to attach the "CSRF" header to each of
 * the outgoing requests issued by this application. The CSRF middleware
 * included with Laravel will automatically verify the header's value.
 */

Vue.http.interceptors.push((request, next) => {
    request.headers.set('X-CSRF-TOKEN', Laravel.csrfToken);

    next();
});

/**
 * Echo exposes an expressive API for subscribing to channels and listening
 * for events that are broadcast by Laravel. Echo and event broadcasting
 * allows your team to easily build robust real-time web applications.
 */

import Echo from "laravel-echo"

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: '183d16cb449d' //not my real code
});

那么这里可能出现什么问题？

Answer 1

_laravelEcho2是import Echo from "laravel-echo"和 _laravelEcho2.default.channel表示这不是您的Echo，而是导入的window.Echo = new Echo({...}) window.Echo.channel('test') .listen('...', (e) => { console.log(e) })。我不知道为什么这个例子有这么令人困惑的代码。

heroku run python manage.py migrate

祝你好运！

Answer 2

在主视图中，在标题中添加以下内容：

<script>
    window.App = {
        csrfToken: '{{ csrf_token() }}',
        stripePublicKey: '{{ config('services.stripe.key') }}'
    }
</script>

然后在bootstrap.js文件中将request.headers.set('X-CSRF-TOKEN', Laravel.csrfToken);更改为request.headers.set('X-CSRF-TOKEN', window.App.csrfToken);。

Answer 3

将Echo类实例化为vue的原型属性，例如 ``` Vue。原型。$ echo = new Exho（{...}} ``

然后在组件中的某处

{ .... mounted (){ this.&echo. Listen().... } }

Laravel与vue.js回应

3 个答案: