V-inside v-for - 두 열에 항목 목록 표시

V-inside v-for - 두 열에 항목 목록 표시

이런 질문을 여러 번 받고 있는 것을 알 수 있어서 죄송합니다.다음은 나를 도울 뻔했던 사람들입니다. 그리고 왜 그들이 도와주지 않았습니까?

• 이것은 렌더링이 아니라 메서드/계산 섹션에서 계산해야 하기 때문입니다.그건 나한테 도움이 안 돼
• 이것은 두 개의 다른 템플릿을 사용하여v-iftemplate-tag에 표시됩니다.두 템플릿이 98% 동일하기 때문에 제 경우엔 어리석게 보일 수 있습니다.
• 이 중급 기사는 내 문제와 매우 가까운 문제를 다루고 있다.다만, 이것은 그의 경우 사용자의 필터링(계산된 속성으로 해결됨)일 뿐, 특정의 반복에 코드의 일부를 삽입하는 if-clause(제가 찾고 있는 것)가 아닙니다.

문제

API에서 가져온 아이템 목록이 있기 때문에 금액이 변경됩니다.다음과 같이 두 열에 표시합니다.

-----------------
| Item1   Item5 |
| Item2   Item6 |
| Item3   Item7 |
| Item4         |
-----------------

루프를 사용해서 그것들을 통과시키고 있어v-for고리.

나의 시도

1. 에서의 순수 CSS 사용display: flex

하지만 이것밖에 할 수 없습니다.

-----------------
| Item1   Item2 |
| Item3   Item4 |
| Item5   Item6 |
| Item7         |
-----------------

2. 에서의 CSS 사용column-count: 2;

하지만 기둥의 중간 부분이 부서지는 건display: block; overflow: hidden;그리고 다른 많은 시도들.이러한 요소의 높이는 다를 수 있습니다.

3. 그래서 저는 CSS를 사용해서 고치는 것을 포기했습니다.

그랬다면php그럼 이렇게 하면 되겠네요.

<?php
if( $index == count( $items)/2 ):
  echo '</div>';
  echo '</div>';
  echo '<div class="col-md-6">';
  echo '<div class="item-container">';
endif;
?>

...하지만 그렇지 않지.그리고 나는 vue 대안을 찾고 있다.이거 해봤어요.

{{#if key === Number( items.length / 2 ) }}
  </div>
  </div>
  <div class="col-md-6">
  <div class="item-container">
{{/if}

하지만 효과가 없어요.그리고 내가 아는 한, 그것은 그것을 하는 'vue 방식'이 아니다.근데 뭐가 뭔지 모르겠어요. :-/

그런 게 있나요?

현재 코드 단순화

<div class="col-md-12">
    <div class="items-container">
        <div class="item-container" v-for="item, key in items['data']">
            <!-- A BUNCH OF ITEM-INFO -->
        </div><!-- /.item-container -->
    </div><!-- /.items-container -->
</div><!-- /.col-md-12 -->

이 경우 항목 배열을 적절한 수의 열로 분할(또는 청킹)하는 계산된 속성을 만듭니다.

다음은 플렉스박스 레이아웃과 추가 열 요소를 사용하는 예입니다.

new Vue({
  el: 'main',
  data: {
    items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6', 'Item 7'],
    cols: 2
  },
  computed: {
    columns () {
      let columns = []
      let mid = Math.ceil(this.items.length / this.cols)
      for (let col = 0; col < this.cols; col++) {
        columns.push(this.items.slice(col * mid, col * mid + mid))
      }
      return columns
    }
  }
})

.container {
  display: flex;
  border: 1px solid;
}
.col {
  margin: 10px;
  border: 1px solid;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.item-container {
  border: 1px solid;
  padding: 5px;
  margin: 5px;
}

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script>
<main>
<p><label>Columns:<label> <input type="number" v-model="cols"></p>
<div class="container">
  <div class="col" v-for="column in columns">
    <div class="item-container" v-for="item in column">{{item}}</div>
  </div>
</div>
</main>

항목 배열을 보다 상세하게 정리하려면 배열을 청크로 분할을 참조하십시오.

나와 같은 문제를 우연히 발견한 사람을 보니 좋다.각 열에 6개의 항목을 배치해야 했습니다.API-response를 컬럼으로 잘라 인쇄했습니다.

let allCategory = response.body.Categories.slice(); //clone
while (allCategory.length > 0) {
  let chunk = allCategory.splice(0,6);
  this.ColArray.push(chunk);
}  

ColArray는 열의 배열을 포함하는 배열입니다.다음과 같습니다.

{
  ColArray: [
    Column1: [
      Item1,
      Item2,
      Item3,
    ],
    Column2: [
      ...
    ]
  ]
}

Vue에서는 다음과 같이 루프 스루됩니다.

<div v-for="(col,colIndex) in ColArray" :key="'cate_col'+colIndex" class="col-md-2">
  <div v-for="(row,rowIndex ) in col"   :key="'cate_row'+colIndex + rowIndex" class="row">
    {{row}}
  </div>
</div>

다음은 바이올린 샘플입니다.

https://jsfiddle.net/keysl183/50wL7mdz/775484/

동일한 결과를 얻으려고 하는 사용자(항목을 열로 분할)를 위해 배열 대신 개체를 분할합니다.

이 해답은 필이 선택한 답변에 기초하고 있습니다.

오브젝트를 사용합니다.키를 눌러 객체를 루프하고 Object.entries를 눌러 객체에서 배열을 반환합니다.html 템플릿의 인덱스를 통해 액세스하는 대신 키로 액세스합니다.

new Vue({
    el: 'main',
    data: {
        items: { 
          item1: { name: 'Item 1' }, 
          item2: { name: 'Item 2' }, 
          item3: { name: 'Item 3' },
          item4: { name: 'Item 4' },
          item5: { name: 'Item 5' },
          item6: { name: 'Item 6' },
          item7: { name: 'Item 7' },
          item8: { name: 'Item 8' },
          item9: { name: 'Item 9' },
          item10: { name: 'Item 10' },
        },
        cols: 2
    },
    computed: {
          columns: function() {
              let columns = [];
              let mid = Math.ceil(Object.keys(this.items).length / this.cols);

              for (let col = 0; col < this.cols; col++) {
                  columns.push(Object.entries(this.items).slice(col * mid, col * mid + mid).map(entry => entry[1]));
              }
              return columns;
          }
      }
});

.container {
  display: flex;
  border: 1px solid;
}
.col {
  margin: 10px;
  border: 1px solid;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.item-container {
  border: 1px solid;
  padding: 5px;
  margin: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.9/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script>
  <main>
    <p><label>Columns:<label> <input type="number" v-model="cols"></p>
    <div class="container">
      <div class="col" v-for="column in columns">
        <div class="item-container" v-for="(item, index) in Object.keys(column)">
        {{column[item].name}}</div>
      </div>
    </div>
</main>

언급URL : https://stackoverflow.com/questions/53075877/v-if-inside-v-for-display-list-of-items-in-two-columns