如何解决 vuejs 中的网格问题

Question

在 vuejs 中，我无法使用 v-for 制作网格 css，我使用了模板网格列，所以我可以在同一行有 3 个 div，但结果只是一行中的一个 div，这不是我想要的结果，所以有我可以使用的任何最佳解决方案，这是代码，这是 html 部分：

<template>
    <div>
    <div>
            <select class="select"  v-model="status">
            <option value="onSale">onSale</option>
            <option value="featured">featured</option>
      </select>
      <caption>Total {{computedProducts.length}} Products</caption>
    <div  class ="productListing" v-for="(product, index) in computedProducts" :key="index">
        <div class="singleProduct box effect1">
      <h1>{{product.name}}</h1>
        <h1></h1>{{product.color}}
          {{product.featured}}
        </div>
    </div>
    </div>
    </div>
    </template>

vuejs 部分：

          <script>
    // @ is an alias to /src

    export default {
      name: 'home',
    data() {
        return {
          status: [],
          products: [
            {name:'test1', color:'red', size:'XL',status:"featured"},
            {name:'test2', color:'black', size:'L',status:"onSale"},
            {name:'test3', color:'red', size:'L',status:"featured"},
          ],

        }
      },
      computed: {
        computedProducts: function () {
          return this.products.filter((item) => {
                   return   (this.status.length === 0 || this.status.includes(item.status))
          })
        }
      }
    }
    </script>
    css part : 
    <style lang="scss" scoped>
    .productListing {
        display: grid;
        grid-template-columns: 1fr 1fr
    }
    .box {
        background:#FFF;
        margin:40px auto;
    }
    /*==================================================
     * Effect 1
     * ===============================================*/
    .effect1{
        -webkit-box-shadow: 0 10px 6px -6px #777;
           -moz-box-shadow: 0 10px 6px -6px #777;
                box-shadow: 0 10px 6px -6px #777;
    }
    $green: #2ecc71;
    $red: #e74c3c;
    $blue: #3498db;
    $yellow: #f1c40f;
    $purple: #8e44ad;
    $turquoise: #1abc9c;
    .select {
    border: 0.1em solid #FFFFFF;
    margin: 0 0.3em 0.3em 0;
    border-radius: 0.12em;
    box-sizing: border-box;
    text-decoration:none;
    font-family:'Roboto',sans-serif;
      }
    </style>

预先感谢您的帮助

Answer 1

你的网格效果会出现在它的子项下而不是它本身。 您需要为您的产品添加一个父 div，如下所示

<div class="productListing">
    <div v-for="(product, index) in computedProducts" :key="index">
        ......
    </div>
</div>

CSS 将是

.productListing {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}