首页 新闻 搜索 专区 学院

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>
大神老姜的主页 大神老姜 | 初学一级 | 园豆:132
提问于:2017-09-09 16:23
< >
分享
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册