javascript - 怎么把ajax获取到的数据添加到组建中
本文介绍了javascript - 怎么把ajax获取到的数据添加到组建中的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
自定义的组件中没有办法添加直接添加v-for吗,为什么我一把v-for加上之后这一部分就不再加载了呢,我怎么才能把ajax获取到的数据放到这里面,请大神帮忙指点一下,小弟感激不尽
Vue.component('my-article',{
props:['detail','user'],
template:'<h6>{{detail.title}}</h6>'+
'<table id="phone">'+
'<thead>'+
'<tr>'+
'<td style="width: 150px;">{{detail.department}}</td>'+
'<td style="width: 119px;">{{detail.phone1}}</td>'+
'<td style="width: 121px;">{{detail.phone2}}</td>'+
'</tr>'+
'</thead>'+
'<tbody>'+
'<tr v-for="data in users" :user="data">'+
'<td>{{user.name}}</td>'+
'<td>{{user.details1}}</td>'+
'<td>{{user.details2}}</td>'+
'</tr>'+
'</tbody>'+
'</table>'
});
这么才能让它只循环执行tr那一段呢
let vm = new Vue({
el:"#module-duty",
data:{
article:{
title:"值班单位电话",
department:"单位",
phone1:"内线电话",
phone2:"外线电话"
},
users:""
},
created:function(){
$.ajax({
url:"http://localhost:8080/opseyetem/post/find.do",
type:"post",
dataType:"json",
success:function(result){
if(result.state==0){
vm.users = result.data;
}
},
error:function(){
alert("请求失败");
}
});
}
});
解决方案
Vue.component('my-article',{
props:['detail','user'],
template:'<h6>{{detail.title}}</h6>'+
'<table id="phone">'+
'<thead>'+
'<tr>'+
'<td style="width: 150px;">{{detail.department}}</td>'+
'<td style="width: 119px;">{{detail.phone1}}</td>'+
'<td style="width: 121px;">{{detail.phone2}}</td>'+
'</tr>'+
'</thead>'+
'<tbody>'+
'<tr v-for="data in user">'+
'<td>{{data.name}}</td>'+
'<td>{{data.details1}}</td>'+
'<td>{{data.details2}}</td>'+
'</tr>'+
'</tbody>'+
'</table>'
});
HTML
<my-article :detail="article" :user="users"></my-article>
这篇关于javascript - 怎么把ajax获取到的数据添加到组建中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文