Laravel與vue.js回聲

我試圖做一個任務應用Laravel echo（只是爲了檢查Laravel回聲）。（我使用Laravel 5.3）Laravel與vue.js回聲

但我有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：

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 
});

那麼，什麼可能是錯在這裏？

來源

2016-09-25 Jamie

_laravelEcho2是import Echo from "laravel-echo"和 _laravelEcho2.default.channel說這不是你的Echo而是進口的。我不知道爲什麼這個例子有這樣一段令人困惑的代碼。

window.Echo = new Echo({...}) 
window.Echo.channel('test') 
      .listen('...', (e) => { console.log(e) })

祝你好運！

來源

2016-09-25 18:13:45 greut

在您的主視圖中添加類似這樣的標題：

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

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

來源

2016-10-13 10:17:02

Laravel與vue.js回聲

回答

相關問題