涉及到3張資料表:users、articles、images
users和articles,一對多,也就是一個使用者可以有多篇文章
articles和images,一對一,也就是一篇文章有一張圖片,(這裡雖然可以把圖片當作articles表的一列,但這裡先不這樣做)
控制器:查詢目前登入使用者的文章,和文章對應的圖片,返回,前台用vuejs接收。
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>
有兩個問題,程式碼在js部分:
1、使用$.getJSON
發送ajax請求,傳回一個對象,html中title欄位可以正常顯示。關聯表image欄位不能顯示,該怎麼寫才能顯示?
2、當使用vue-resource程式碼發送ajax請求的時候,返回的是一個數組,數組中的元素是對象,這時title字段也不能顯示,image字段當然也不會顯示,應該怎麼寫才能顯示?