[英]Vue.js with laravel 5.3
I'm using Laravel 5.3 with Vue.js(very new to this). 我正在将Laravel 5.3与Vue.js一起使用(这是新的)。 Here's my current code 这是我当前的代码
app.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 is very simple api.php路由非常简单
Route::get('/messages', function() {
return Message::latest()->get();
});
Note: here when i try access the route directly as localhost:8000/api/messages i get the array with the full data 注意:在这里,当我尝试以localhost:8000 / api / messages的身份直接访问路由时,将获得具有完整数据的数组
On my view i have 我认为我有
<div class="content" id="app">
<tr v-for="message in messages">
<td> @{{ message}} </td>
</tr>
</div>
I have included online libraries for all jquery, vue.js, and vue.resource. 我已经为所有jquery,vue.js和vue.resource提供了在线库。 When i use vue.js debugger it shows that it returns messages[]
but it's empty. 当我使用vue.js调试器时,它表明它返回messages[]
但它为空。 I have followed a lot of examples but couldn't get it to work. 我遵循了很多示例,但无法使其正常工作。 Any help is greatly appreciated 任何帮助是极大的赞赏
if you are using vue.js 2.0 , ready is deprecated now, you may use mounted instead 如果您使用的是vue.js 2.0,现在不建议使用ready,则可以改用mount
mounted: function () {
this.$nextTick(function () {
this.getMessages();
})
}
Since you are using the arrow syntax, then I switched to full ES2015 Code 由于您使用的是箭头语法,因此我切换到完整的ES2015代码
getMessages() {
this.$http.get('api/messages')
.then( result => {
this.messages = result.json()
})
}
Try this: 尝试这个:
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.