Vue v-for嵌套内循环数据筛选问题
0
悬赏园豆：10
[已关闭问题]
关闭于 2017-09-14 13:54
功能是这样的：需要展示一个县-镇的according组件，有多个县，每个县下面有多个镇，县和镇的数据结构是一样的，区别是镇的parentId=县的Id而县的parentId为0。
实现思路是用v-for嵌套，存在的问题是内循环的镇无法显示，请高手支招。Vue版本是2.0的，代码如下：
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-collapse" v-for="xian in townInAreas">
<a class="mui-navigate-right" href="#" v-text="xian.Name"></a>
<div class="mui-collapse-content" :id="xian.Id">
<button type="button" :id="zjd.Id" class="mui-btn button-light" v-for="zjd in filterZjdInXian(xian.Id)">{{zjd.Name}}</button>
</div>
</li>
</ul>
<script>
export default{
data(){
return{
areas:[],
townInAreas:[]
}
},
created(){
this.getAreas();
},
methods:{
getAreas(){
//获取镇街道列表
var url = '../api/Areas/';
this.$http.get(url).then(function(res){
var data = res.body;
if (data.status!=0){//出现错误
return;
}
this.areas = data.message;
var xianInAreas = item => item.parentId === 0;
this.townInAreas = this.areas.filter(xianInAreas);
});
},
filterZjdInXian:function(pid){
return this.areas.filter(function(item){
item.parentId === pid;
});
}
}
}
</script>
