Display the child array based on the id of the parent array vue?

Question

I have an array of folders and an array of groups belonging to folders. I'm using v-for to show groups that belong to folders like this but how can I make them display correctly according to the folder they belong to. I have the folder_id property in each objects groups and I think I need to compare it to folder.id but I have no idea where I should put it in. This is the picture of my problem. It should have 1 group inside each folders. Please help

<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
  }

Rahul · Accepted Answer · 2021-08-19 07:27:20Z

1

Solution 1

Simply add a v-if in

        <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>

Solution 2

Add a computed property to get the filtered list

 <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)
       }
      }

answered Aug 19, 2021 at 7:27

Rahul

5,9147 gold badges44 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rahul Over a year ago

@Lucas updated the answer with one more option.

Lucas Over a year ago

Yes, it's working. Thank you so much <3 It's so simply

Collectives™ on Stack Overflow

Display the child array based on the id of the parent array vue?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related