행/하위 구조를 사용한 루프

행/하위 구조를 사용한 루프

저는 이 문제에 점점 더 자주 직면하게 되고 이에 대한 간단한 해결책이 없을까 고민하고 있습니다.일련의 데이터를 열/자녀 구조로 바꾸려다 막혔어요

이게 내가 달성하려는 것이다.

<div class="row">
  <div>Data 1</div>
  <div>Data 2</div>
<div class="row">
  <div>Data 3</div>
  ...

대부분의 경우 데이터 루프를 한 줄로 묶는 등의 작업을 마쳤습니다.하지만 더 맞춤화된 방식으로 데이터를 표시할 수 없었습니다.더 좋은 방법이 있을까요?

<div v-for="item in items">
   <div class="row">
    <div>{{ item.message }}</div>
   </div>
</div>

예를 들어, 3개의 아이템.메시지 후에 새로운 행이 생성되는 등?

일반적으로는 계산된 값을 사용하여 원하는 방식으로 데이터를 그룹화한 다음 그룹화된 데이터를 반복합니다.

console.clear()

new Vue({
  el: "#app",
  data:{
    todos: [
      {id: 1, text: "learn Vue"},
      {id: 2, text: "learn Vuex"},
      {id: 3, text: "learn Vue Router"},
      {id: 4, text: "learn javascript"},
      {id: 5, text: "wash dishes"},
      {id: 6, text: "go to gym"},
      {id: 7, text: "go out with Sally"},
    ],
    todosPerRow: 3
  },
  computed:{
    grouped(){
      return this.todos.reduce((acc, val, ndx) => {
        let key = Math.floor(ndx / this.todosPerRow)
        if (acc[key]) acc[key].push(val)
        else acc[key] = [val]
        return acc
      }, {})
    }
  }
})

.row {
  border: 1px solid 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.7/vue.js"></script>
<div id="app">
  <template v-for="group in grouped">
    <div class="row">
      <div v-for="todo in group">{{todo.text}}</div>
    </div>
  </template>
</div>

여기에 빠르고 지저분한 그룹화 함수를 작성했습니다.Lodash와 같은 라이브러리에서도groupBy대신 사용할 수 있는 방법입니다.

언급URL : https://stackoverflow.com/questions/47403278/looping-with-row-child-structures