代码之家 › 专栏 › 技术社区 › wen tian

AXIOS如何获取树JSON并呈现Vue页面?

vue.js javascript

-1

wen tian · 技术社区 · 6 年前

最近,由于Vue后台管理项目的需要,该页面需要生成一个无限的树。我已经返回json data of http://private-4f7c1-zyl1.apiary mock.com/questions>转到 Enter link description here 。


   
    回报就像这样
   
   < PRE> >代码>
{
“ID”:1,
“name”:“华为”,
“PID”:0
}
{
“ID”:2,
“名字”:“苹果”,
“PID”:0
}
{
“ID”:3,
“name”:“iPhone X”,
“PID”:2
}
{
“ID”:4,
“name”:“Nove 3”,
“PID”:1
}
{
“ID”:5,
“name”:“iPhone 8 Plus”,
“PID”:2
}
]
< /代码>
   
    我有Vue代码:
   
   新Vue({
EL:“应用程序”,
数据:{
配音员:[ ]
}
安装(){
axios.get('https://private-4f7c1-zyl1.apiary mock.com/questions')
。然后(响应=>){
console.log(响应);
this.phoneList=响应.data;
})
.catch(错误=>){
console.log(错误);
(});
}
方法:{
}
})
< /代码>
   
    我可以提供这样一个效果HTML模板:
    
     Enter link description here
    
    
     。
    
   
   
    
     
      I want this effect_¼_
     
    
    
    
   
   
    
     
     
     
      
      .
     
     
      
       . 去
      
     
     
      enter link description here
     
     .
    
    
     回报就像这样
    
    [
{
    "id":1,
    "name":"HuaWei",
    "pid":0
},
{
    "id":2,
    "name":"Apple",
    "pid":0
},
{
    "id":3,
    "name":"Iphone X",
    "pid":2
},
{
    "id":4,
    "name":"nove 3",
    "pid":1
},
{
    "id":5,
    "name":"Iphone 8 plus",
    "pid":2
 }
]

    
     我有Vue代码:
    
    new Vue({
el: "#app",
data: {
phoneList: []
},
mounted() {
   axios.get('https://private-4f7c1-zyl1.apiary-mock.com/questions')
.then(response=> {
  console.log(response);
  this.phoneList = response.data;
})
 .catch(error => {
 console.log(error);
 });
 },
  methods: {
 }
})

    
     我可以提供这样的效果HTML模板:
     
      enter link description here
     
     .
    
    
     
      我想要这个效果

1 回复 | 直到 6 年前

tony19 RuNpiXelruN 6 年前

这是一个数据结构问题。您可以将AXIOS响应重新构造为便于呈现特定树的数据结构:

在一个 computed property (例如,命名为“phonegroups”),获取所有组,由 pid 属于 0 :
```
const groups = this.phoneList.filter(x => x.pid === 0);
```

对于每个组,获取属于该组的项,由 PID 与组ID匹配的:

const data = {};
for (const g of groups) {
  const subitems = this.phoneList.filter(x => x.pid === g.id);
  data[g.id] = {
    group: g,
    subitems,
  };
}
return data;

在模板中,按如下方式呈现计算结果:

<ul>
  <li v-for="({group, subitems}) in phoneGroups" :key="group.id">
    <span>{{group.name}}</span>
    <ol>
      <li v-for="subitem in subitems">-- {{subitem.name}}</li>
    </ol>
  </li>
</ul>

demo