Vue：使用v-for

Question

我有一系列商品，我想在Vue中创建一个如下所示的布局。 This问题部分解决了该问题，但就我而言，我需要1 + 3 +3。我们将不胜感激。谢谢！

相关代码

<div v-if="posts.length">
  <post-list
     v-for="post in posts"
     :key="post.id"
     :post="post"
     :size="post.media_414x276"
  />
</div>

  computed: {
    posts() {
      return this.$store.getters.requestedItems(this.request)
    }
  },
  methods: {
    getPosts() {
      return this.$store.dispatch('getItems', this.request)
    }
  },
  created() {
    this.getPosts()
  }

编辑：

可能在数据中具有totalItems属性，并据此计算列。

所需的html输出

<div class="row">
    <div class="col s12 m4">
       <div>Item 1</div>       
    </div>
    <div class="col s12 m4">
       <div>Item 2</div>
       <div>Item 3</div>
       <div>Item 4</div>       
    </div>
    <div class="col s12 m4">
       <div>Item 5</div>
       <div>Item 6</div>
       <div>Item 7</div>       
    </div>  
    <div class="col s12 m4"> <!-- repeat if more items  --> 

    </div> 
</div>