Javascript axios如何获取json树并呈现vue页面？

最近，由于vue后台管理项目的需要，页面需要做一个无限树，我返回了

json数据http://private-4f7c1-zyl1.apiary-mock.com/questions

。去医院

回报是这样的：

[
{
    "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模板：

我想要这个效果：

---

这是一个数据结构问题。您可以将Axios响应重塑为便于呈现特定树的数据结构：

在a中（例如，命名为“phoneGroups”），获取所有组，由

0的
pid
指示：

const groups = this.phoneList.filter(x => x.pid === 0);

对于每个组，获取属于该组的项目，由与组ID匹配的

pid

指示：

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>

电话组中的

{{group.name}
--{{subitem.name}

---

它与vue无关，只是一些简单的算法，你最好看看

递归算法

，它会帮你很多忙。@Jerry我明白了，我会去看看的！