Блог

У меня есть массив папок и массив групп, принадлежащих папкам. Я использую v-for для отображения групп, принадлежащих таким папкам, как эта, но как я могу заставить их правильно отображаться в соответствии с папкой, к которой они принадлежат. У меня есть folder_id свойство в каждой группе объектов, и я думаю, что мне нужно его сравнить, folder.id но я понятия не имею, куда его поместить. Вот картина моей проблемы. В каждой папке должно быть по 1 группе. Пожалуйста, помогите

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

Решение 1

Просто добавьте v-если в

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