使用行/子结构循环

Question

我越来越经常遇到这个问题，想知道是否有简单的解决方法。在尝试循环遍历一组数据并将其转换为行/子级结构时有些困惑。

下面是我想要实现的效果。

<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个item.messages之后，会生成一个新的行，等等？

- Kelvin Zhao

---

嗨@Bert，例如，只有一个包含10个待办事项的列表。但我想让每3个待办事项放在一行div中。因此结果将是4行。前3行内各有3个数据，最后一行有一个输入的数据。使用普通的v-for循环，我要么得到每行一个数据的10行，要么得到其中10个数据的1行。我想知道如何分解循环，以便它可以遵循1行3个数据结构。 - Kelvin Zhao

谢谢，这为我澄清了问题。 - Bert

Answer 1

通常我处理这个问题的方法是使用计算值来按照我想要的方式对数据进行分组，然后迭代处理分组后的数据。

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方法，您也可以使用它来代替。

- Bert

---

太好了！我会去试一下，也会看看lodash。谢谢~~~ - Kelvin Zhao