根据父数组vue的id显示子数组吗？

Question

我有一个文件夹数组和一个属于文件夹的组数组。我使用v-for来显示属于这样的文件夹的组，但是如何根据它们所属的文件夹正确地显示它们呢？我在每个对象组中都有folder_id属性，我想我需要将它与folder.id进行比较，但我不知道应该把它放在哪里。这就是我的问题所在。它应该在每个文件夹中有一个组。请帮帮忙

<div
        v-for="(folder, index) in list_folders"
        :key="folder.id"
        class="d-block mb-11"
      >
        <div class="d-flex align-items-center mb-5">
          <i class="fas fa-folder me-3 fs-30 text-primary"></i>
          <span
            @click="showModalEditFolder(index)"
            class="text-primary fs-15 cursor-pointer"
            >{{ folder.name }}</span
          >
        </div>
        <div class="d-block">
          <ul class="list-unstyled m-0">
            <li
              v-for="group in list_groups"
              :key="group.id"
              class="d-flex align-items-center mb-3"
            >
              <input
                class="form-check-input w--4 h--4 rounded-0 m-0 me-6"
                type="checkbox"
                :value="group.id"
                :id="group.id"
              />
              <div class="w--11 h--11 me-3">
                <img
                  :src="group.avatar"
                  alt="group-avatar"
                  class="img-cover w-100"
                />
              </div>
              <label :for="group.id" class="form-check-label">
                {{ group.name }}
              </label>
              <div class="ms-auto">
                <input
                  type="checkbox"
                  class="btn-check"
                  :id="`notify${group.id}`"
                  v-model="group.notify_option"
                  :true-value="1"
                  :false-value="0"
                />
                <label
                  class="fs-15 text-primary cursor-pointer"
                  :for="`notify${group.id}`"
                  >{{
                    group.notify_option === 1
                      ? $t('common.select.notify')
                      : $t('common.select.no_notify')
                  }}</label
                >
              </div>
            </li>
          </ul>
        </div>
      </div>

getFolders() {
    let data: any[] = [
      {
        id: 100,
        name: '店舗',
        order_position: 1
      },
      {
        id: 101,
        name: '東日本統括部',
        order_position: 2
      }
    ]
    this.list_folders = data
  }

getGroupsOfUser() {
    let data: any[] = [
      {
        id: 200,
        folder_id: 100,
        avatar: require('@/assets/images/group-avatar2.png'),
        order_position: 1,
        name: '仙台営業所',
        notify_option: 0
      },
      {
        id: 201,
        folder_id: 101,
        avatar: require('@/assets/images/group-avatar3.png'),
        order_position: 2,
        name: '東日本統括部',
        notify_option: 1
      }
    ]
    this.list_groups = data
  }

​

​

Answer 1

解决方案1

只需在中添加一个v-if

        <li
          v-for="group in list_groups"
          :key="group.id"
          class="d-flex align-items-center mb-3"
        >
                <template v-if="group.folder_id === folder.id">
                  // li content
                <template>
        </li>

解决方案2

添加计算属性以获取过滤后的列表

 <li
          v-for="group in list_groups"
          :key="group.id"
          class="d-flex align-items-center mb-3"
        >
                <template v-if="group.folder_id === folder.id">
                  // li content
                <template>
        </li> <li
          v-for="group in getListGroups(folder.id)"
          :key="group.id"
          class="d-flex align-items-center mb-3"
        >
           // li code
        </li>

      computed: {
       getListGroups(folderId) {
         return this.list_groups.filter(x => x.folder_id === folderId)
       }
      }