我正在使用 v-for 遍历我的数组，我希望每个项目都进入特定的网格位置。我怎么做？

Question

嗯，我有这个组件，我想在如下所示的网格中显示我的数据：

我正在遍历数组的最后 3 项

async created(){
        const res = await axios.get("https://base-url/posts")
        const data = res.data;
        this.destaques= data.slice(-3);     
    }

但是当我使用 v-for 时，我没有看到将它们放在上面的位置的方法。

<div v-for="(destaque, i) in destaques" :key='i'>
    <nuxt-link :to="`/${destaque.id}`">
         <p>{{destaque.title}}</p>
    </nuxt-link>
</div>

我试过这种方法

        <div class="destaques__principal">
            <nuxt-link tag="a" :to='`/${destaques[0].id}`' class="wrap-link">
            <img :src="`${destaques[0].image[0].name}`" alt="">
            <div class="white-box">
                <h1 class="white-box__title">{{destaques[0].title}}</h1>
            </div>
            </nuxt-link>
            </div>
        <div class="destaques__cima">
            <nuxt-link tag="a" :to='`/${destaques[1].id}`' class="wrap-link">
            <img :src="`${destaques[1].image[0].name}`" alt="">
            <div class="white-box">
                <h1 class="white-box__title">{{destaques[1].title}}</h1>
            </div>
            </nuxt-link>

        </div>
        <div class="destaques__baixo">
            <nuxt-link tag="a" :to='`/${destaques[2].id}`' class="wrap-link">
            <img :src="`${destaques[2].image[0].name}`" alt="">
            <div class="white-box">
                <h1 class="white-box__title">{{destaques[2].title}}</h1>
            </div>
            </nuxt-link>

        </div>

一开始它可以运行，但是当我单击徽标返回主页时，出现错误。当我像这样 destaque.title 显示数据时，我没有收到该错误。所以我想知道是否有一种方法可以将项目动态排列到网格上的特定位置。有没有人可以帮助我，好吗？

Answer 1

您可以使用 CSS 网格来实现此目的。演示：https://jsfiddle.net/kpset24g/1/

HTML

<div class="grid">
    <div v-for="(item, i) in items" class="box" :class="{'full-height-box': i == 0}">
        {{item}}
    </div>
</div>

CSS

.grid {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 2;
  grid-gap: 10px; /* OPTIONAL */
}

.full-height-box {
  grid-row: 1 / span 2;
}

.box { /* Custom styles of your box */ }

JS（和演示一样）

new Vue({
  //...
  data: {
    items: ['Block 1', 'Block 2', 'Block 3']
  }
})

我正在使用 v-for 遍历我的数组，我希望每个项目都进入特定的网格位置。我怎么做？

I'm looping through my array with v-for and I would like that each item goes to a specific grid position. How do I do that?

vue.js

v-for

nuxt.js