如何从单个 API 查询中循环父级和过滤兄弟级？答案

【问题标题】：how to loop parent and filter sibling from a single API query?如何从单个 API 查询中循环父级和过滤兄弟级？
【发布时间】：2021-06-22 12:18:38
【问题描述】：

菜鸟问题:)。

使用以下数据，我想先遍历域，然后遍历子域。我不知道如何传递 id （尝试计算）

domains: [
  {
    id: 1,
    parent_id: NULL,
    title: 'Domain 1'
  },
  {
    id: 2,
    parent_id: NULL,
    title: 'Domain 2'
  },
  {
    id: 3,
    parent_id: 1,
    title: 'SubDomain 11'
  },
  {
    id: 4,
    parent_id: 1,
    title: 'Sub Domain 12'
  },
  {
    id: 5,
    parent_id: 2,
    title: 'SubDomain 21'
  },
  {
    id: 6,
    parent_id: 2,
    title: 'Sub Domain 22'
  },
]

我想要的结果：

域 1.
子域 11
子域 12

域 2
子域 21.
子域 22。

当前代码

<template>
  <div v-for="domain in rootDomains" :key="domain.id">
    <h2 class="text-2xl">{{ domain.name }}</h2>
    <div v-for="subdomain in subDomains(domain.id)" :key="subdomain.id">
      {{ subdomain.name }}
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        domains: [],
      };
    },
    [...]
    computed: {
      rootDomains() {
        return this.domains.filter(domain => domain.parent_id === null);
      },
      subDomains(parentId) {
        return this.domains.filter(domain => domain.parent_id === parentId);
      },
    },
  }
</script>

【问题讨论】：

标签： javascript html vue.js vuejs3

【解决方案1】：

将参数传递给计算属性，例如 property(){ return (param)=>{...}} 而不是 property(param){ return ...} 和 NULL 应该是 null

const {
  createApp
} = Vue;
const App = {
  data() {
    return {
      domains: [{
          id: 1,
          parent_id: null,
          title: 'Domain 1'
        },
        {
          id: 2,
          parent_id: null,
          title: 'Domain 2'
        },
        {
          id: 3,
          parent_id: 1,
          title: 'SubDomain 11'
        },
        {
          id: 4,
          parent_id: 1,
          title: 'Sub Domain 12'
        },
        {
          id: 5,
          parent_id: 2,
          title: 'SubDomain 21'
        },
        {
          id: 6,
          parent_id: 2,
          title: 'Sub Domain 22'
        },
      ],
    };
  },
  computed: {
    rootDomains() {
      return this.domains.filter(domain => domain.parent_id === null);
    },
    subDomains() {
      return (parentId) => this.domains.filter(domain => domain.parent_id === parentId);
    },
  }
}
const app = createApp(App)
app.mount('#app')

<script src="https://unpkg.com/vue@3.0.0-rc.11/dist/vue.global.prod.js"></script>

<div id="app">
  <div v-for="domain in rootDomains" :key="domain.id">
    <h2 class="text-2xl">{{ domain.name }}</h2>
    <div v-for="subdomain in subDomains(domain.id)" :key="subdomain.id">
      {{ subdomain.name }}
    </div>
  </div>
</div>

【讨论】：