Involves 3 data tables: users, articles, images
Users and articles, one-to-many, that is, one user can have multiple articles
articles and images, one-to-one, that is, one article The article has a picture, (although the picture can be used as a column in the articles table, we will not do so here)
Controller: Query the articles of the currently logged in user and the pictures corresponding to the articles, return them, and use vuejs to receive them at the front desk.
public function articles()
{
$user=\Auth::user();
$articles = $user->articles()->with('images')->get();
return $articles;
}javascript：
<script type="text/javascript">
Vue.config.debug = true;
var vm = new Vue({
el: "#app",
data: function(){
return{
items: []
}
},
created() {
var article=this;
/* $.getJSON('/articles/image',function(data){
console.log(data);
article.items=data;
});*/
this.$http.get('/articles/image').then((response) => {
console.log(response.body);
article.items=response.body;
}, (response) => {
// error callback
});
}
});
</script>html:
<p class="row" v-for="(index, item) in items">
<p class="col-xs-2">
@{{ item.title }}
</p>
<p class="col-xs-2">
@{{ item.image }}
</p>
</p>There are two problems. The code is in the js part:
1. Use $.getJSON to send an ajax request and return an object. The title field in the html can be displayed normally. The image field of the related table cannot be displayed. How should I write it to display it?
2. When using vue-resource code to send an ajax request, an array is returned, and the elements in the array are objects. At this time, the title field cannot be displayed, and of course the image field will not be displayed. How should it be written? show?
