Vue.js如何将对象数组分割为多个div列？

You can use JavaScript's slice() method to split your articles array into the desired subsets directly in your v-for directives. Here's how to adjust your code:

Modified Pug Template #

<template lang="pug">
.row
  .col-4(v-for="article in articles.slice(0, 3)" :key="article.name")
    | {{ article.name }}
.row
  .col-4(v-for="article in articles.slice(3, 6)" :key="article.name")
    | {{ article.name }}
</template>

Explanation #

• slice(0, 3) extracts elements starting at index 0 (inclusive) up to index 3 (exclusive), which gives you the first 3 articles (items 1-3 in your array).
• slice(3, 6) extracts elements from index 3 (inclusive) to index 6 (exclusive), giving you the next 3 articles (items 4-6).
• I added :key="article.name" to each v-for loop—this is a Vue best practice to help the framework efficiently update the DOM when the array changes. Since your article names are unique, using article.name as the key works perfectly here.

If you ever need to handle dynamic array lengths (e.g., more than 6 articles), you could compute the subsets in a computed property for better readability, but for your current use case, directly slicing in the template is clean and straightforward.

内容的提问来源于stack exchange，提问作者Syed