[英]Vue.js with laravel 5.3
我正在将Laravel 5.3与Vue.js一起使用(这是新的)。 这是我当前的代码
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 / messages的身份直接访问路由时,将获得具有完整数据的数组
我认为我有
<div class="content" id="app">
<tr v-for="message in messages">
<td> @{{ message}} </td>
</tr>
</div>
我已经为所有jquery,vue.js和vue.resource提供了在线库。 当我使用vue.js调试器时,它表明它返回messages[]
但它为空。 我遵循了很多示例,但无法使其正常工作。 任何帮助是极大的赞赏
如果您使用的是vue.js 2.0,现在不建议使用ready,则可以改用mount
mounted: function () {
this.$nextTick(function () {
this.getMessages();
})
}
由于您使用的是箭头语法,因此我切换到完整的ES2015代码
getMessages() {
this.$http.get('api/messages')
.then( result => {
this.messages = result.json()
})
}
尝试这个:
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;
});
}
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.