2016-08-05 64 views
0

我使用的是新的laravel(5.2)和vue。我正尝试将数据传递给数据库中的视图。看起来我的正确路线很好,我得到了一些json数据响应,但我无法将数据记录到控制台或我的视图。请让我知道我做错了什么。

这里被存储在一个文件.vue

<template> 

<div class="events_list"> 
    <h1> My Events </h1> 

    <ul class="list-group"> 

     <li class="list-group-item" v-for="event in list"> 
      {{ event.body}} 

     </li> 

    </ul> 
</div> 

</template> 

<script> 
export default { 


    data: function() { 
     return { 


      list: [] 

     }; 

    }, 

    created: function(){ 

     this.fetchEventsList(); 



    }, 

    methods: { 
     fetchEventsList: function() { 
      this.$http.get('/api/events', function(data){ 

       console.log(data); 

      }); 

     }, 

     delete: function(event) { 
      this.list.$remove(event); 

     } 
    } 


} 

这里我ShowEvent组件是我main.js文件

import Vue from 'vue'; 
import VueResource from 'vue-resource'; 
Vue.use(VueResource); 
import ShowEvent from './components/ShowEvent.vue'; 



new Vue({ 

el: '#app', 

components: {ShowEvent: ShowEvent}, 

ready(){ 


     alert("Ready to go!, Show Events"); 


} 

}); 

这是视图文件

<!DOCTYPE html> 
<html> 

<head> 
<title>Eventer</title> 
</head> 


<body> 

<div id="app" class="container"> 

<show-event> 

</show-event> 

</div> 


<script src="/js/main.js"></script> 

</body> 

</html> 
+0

添加回调失败在你的要求,你不应该假定一切请求 – gurghet

+0

此外,什么版本VUE资源是你在工作正常使用,你的语法在当前版本中是错误的 – gurghet

+0

我使用的是vue 1.0.26和vue-resource 0.9.3 – Mover

回答

2

Replac Ë您的来电与:

this.$http.get('/api/events').then((response) => { 
    console.log(response.data) 
}, (error) => { 
    console.log(error) 
}) 

Check the docs更多信息

+0

Works。谢谢 – Mover

相关问题