vue.js - laravel联合查询返回数据使用vuejs显示,原数据表可以显示,关联表数据不能显示
本文介绍了vue.js - laravel联合查询返回数据使用vuejs显示,原数据表可以显示,关联表数据不能显示的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
涉及到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:
<div class="row" v-for="(index, item) in items">
<div class="col-xs-2">
@{{ item.title }}
</div>
<div class="col-xs-2">
@{{ item.image }}
</div>
</div>
有两个问题,代码在js部分:
1、使用$.getJSON
发送ajax请求,返回一个对象,html中title字段可以正常显示。关联表image字段不能显示,应该怎么写才能显示?
2、当使用vue-resource代码发送ajax请求的时候,返回的是一个数组,数组中的元素是对象,这时title字段也不能显示,image字段当然也不会显示,应该怎么写才能显示?
解决方案
item.image.image
改用
response.data
或者response.json
这篇关于vue.js - laravel联合查询返回数据使用vuejs显示,原数据表可以显示,关联表数据不能显示的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文