我正在用v-for循环我的数组，我希望每一项都进入特定的网格位置。我该怎么做？

Question

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

​

​

我正在循环我的数组中的最后三项

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

但是当我使用v-，因为我没有办法把它们放在上面的位置。

<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/

<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']
  }
})