Vue.js与laravel 5.3

我使用Laravel 5.3与Vue.js（对此很新）。这里是我当前的代码Vue.js与laravel 5.3

app.js

var vm = new Vue({ 
    el: '#app', 

    data: { 
      messages: [] 
    }, 

    ready: function(){ 

     this.getMessages(); 
    }, 


    methods: { 

     getMessages: function(){ 
       this.$http.get('api/messages').then((response) => { 
        this.$set('messages', data); 
         }, (response) => { 
       }); 
     } 
    } 
});

api.php路线很简单

Route::get('/messages', function() { 
    return Message::latest()->get(); 
    });

注：这里的时候，我尝试直接访问路径为localhost：8000/API /消息我得到的数据与完整的数据

在我看来我有

<div class="content" id="app"> 
       <tr v-for="message in messages"> 
        <td> @{{ message}} </td> 
       </tr> 
</div>

我已经包含了所有jquery，vue.js和vue.resource的在线库。当我使用vue.js调试器时，它显示它返回messages[]，但它是空的。我遵循了很多示例，但无法使其正常工作。由于您使用箭头语法任何帮助是极大的赞赏

来源

2016-10-02 Shavkat

，然后我切换到全ES2015代码

getMessages() { 

    this.$http.get('api/messages') 
     .then(result => { 
     this.messages = result.json() 
     }) 

}

来源

2016-10-02 10:34:46

贝尔明。非常感谢您的回复。我试过了，它仍然空着。但我发现一种解决方案可能不是最好的。我使用vue.js版本2.0.1，一旦我将其更改为旧版本1.0.2它的工作。 – Shavkat

不幸的是，我还没有使用VueJS 2.0，所以API中的某些东西可能会改变。 –

如果你正在使用vue.js 2.0，准备现在已经过时了，你可以使用安装而不是

mounted: function() { 
    this.$nextTick(function() { 
    this.getMessages(); 
    }) 
}

Vue.js Docs

来源

2016-10-02 11:35:16

试试这个：

var vm = new Vue({ 
    el: '#app', 

    data: { 
      messages: [] 
    }, 

    ready: function(){ 

     this.getMessages(); 
    }, 


    methods: { 

     getMessages: function(){ 
       let ctrl = this; 
       this.$http.get('api/messages').then((response) => { 
        this.messages = response.data; 
       }); 
     } 
    } 
});

来源

2017-10-27 05:53:05 m0z4rt

Vue.js与laravel 5.3

回答

相关问题