Question

在vuejs中，我无法使用v-for创建网格CSS，我使用了template-grid-columns，因此我可以在同一行中包含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);
}

如何解决Vue.js中的网格问题

1 个答案: