Vue遍历这段如何解决重复问题_前端问题_站长_知道

请问大神，如何让遍历出来的东西，江苏安徽只需要一个就够了。常州盐城扬州显示足够了，安徽的下一级隐藏

    <template>
  <div>
    <select>
      <option v-for="mx in list">
        {{mx.prov}}
      </option>
    </select>

    <select>
      <option v-for="mx in list">
        {{mx.city}}
      </option>
    </select>

    <select>
      <option v-for="mx in list">
        {{mx.shop}}
      </option>
    </select>
  </div>
</template>

<script>
 export default{
   data(){
     return{
       list: [{
         "prov": "\u6c5f\u82cf",
         "city": "\u5e38\u5dde",
         "shop": "\u5e38\u5dde\u745e\u5f69\u6c7d\u8f66\u9500\u552e\u670d\u52a1\u6709\u9650\u516c\u53f8"
       }, {
         "prov": "\u6c5f\u82cf",
         "city": "\u76d0\u57ce",
         "shop": "\u76d0\u57ce\u4f17\u60e0\u6c7d\u8f66\u9500\u552e\u670d\u52a1\u6709\u9650\u516c\u53f8"
       }, {
         "prov": "\u6c5f\u82cf",
         "city": "\u626c\u5dde",
         "shop": "\u626c\u5dde\u767e\u745e\u6770\u6c7d\u8f66\u9500\u552e\u670d\u52a1\u6709\u9650\u516c\u53f8"
       }, {
         "prov": "\u5b89\u5fbd",
         "city": "\u5b89\u5e86",
         "shop": "\u5b89\u5e86\u5e02\u4e50\u745e\u884c\u6c7d\u8f66\u9500\u552e\u6709\u9650\u516c\u53f8"
       }, {
         "prov": "\u5b89\u5fbd",
         "city": "\u868c\u57e0",
         "shop": "\u868c\u57e0\u5e02\u6da6\u5229\u6c7d\u8f66\u9500\u552e\u670d\u52a1\u6709\u9650\u516c\u53f8"
       }, {
         "prov": "\u5b89\u5fbd",
         "city": "\u4eb3\u5dde",
         "shop": "\u5b89\u5fbd\u7701\u4eb3\u5dde\u5e02\u82f1\u65d7\u6c7d\u8f66\u9500\u552e\u670d\u52a1\u6709\u9650\u516c\u53f8"
       }, {
         "prov": "\u5b89\u5fbd",
         "city": "\u4eb3\u5dde",
         "shop": "\u8499\u57ce\u53bf\u82f1\u65d7\u6c7d\u8f66\u9500\u552e\u6709\u9650\u516c\u53f8"
       }, {
         "prov": "\u5b89\u5fbd",
         "city": "\u6c60\u5dde",
         "shop": "\u6c60\u5dde\u5e02\u4e07\u4f17\u5b9e\u4e1a\u6709\u9650\u8d23\u4efb\u516c\u53f8"
       }, {
         "prov": "\u5b89\u5fbd",
         "city": "\u6ec1\u5dde",
         "shop": "\u6ec1\u5dde\u5e02\u548c\u5947\u7965\u6c7d\u8f66\u9500\u552e\u670d\u52a1\u6709\u9650\u516c\u53f8"
       }]
     }
   }
 }
</script>

已解决悬赏分：30 - 解决时间 2021-11-26 12:05

点赞 0反对 0举报 0 收藏 0

回答4

最佳

@yzhf29

    <select v-model="prov">
      <option v-for="p in provinces">
        {{p}}
      </option>
    </select>

    <select v-mode="city">
      <option v-for="c in cities">
        {{c}}
      </option>
    </select>

    <select v-mode="shop">
      <option v-for="s in shops">
        {{s}}
      </option>
    </select>


{

data(){
    return {
        prov:null,
        city:null,
        shop:null,
        list:[] // 替换你的list
    }
},
computed:{
    provinces(){
        let provs = {};
        return this.list.forEach((item)=>{
            provs[item.prov] =1;
        });
        return Object.keys(provs);
    },
    cities(){
        let page = this;
        return this.list.filter((item)=>{
            return item.prov == page.prov;
        }).map((item)=>{ return item.city; })
    },
    shops(){
        let page = this;
        return this.list.filter((item)=>{
            return item.city == page.city;
        }).map((item)=>{ return item.shop; })
    }
}

}




 
支持 0
反对 0
举报


                            
                            2021-11-26 05:47


 

                        

                        
                            
@jophen

你先把prov和city的数组提取出来再去重   然后v-for遍历就好了


 
支持 0
反对 0
举报


                            
                                2021-11-26 06:52
                        


                        

                        
                            
@mhwkj88

重构下数据比较好
Object.values(list.reduce((res,v) => {
    const {prov} = v;
    if(res[prov]) {
        res[prov].children.push(v);
    } else res[prov] = {prov, children: [v]};
    return res;
},{}))


 
支持 0
反对 0
举报


                            
                                2021-11-26 08:22
                        


                        

                        
                            
@lx681004

其实这种都是后端返回数据的问题，要是让前端解决，就是去重呗


 
支持 0
反对 0
举报


                            
                                2021-11-26 09:01