vue.js - 如何解决 vuejs 中的网格问题
问题描述
在 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>
预先感谢您的帮助
解决方案
你的网格效果会出现在它的孩子而不是它自己的下面。您需要为您的产品添加一个父 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);
}
推荐阅读
- entity-framework - 如何从使用 EF 核心的父级获取所有子元素
- reactjs - 反应路由器路由特定创建存储,而不是在单页应用程序中加载页面加载时的所有状态
- python - 如何在本地运行我的 Cloud Run 服务?
- asp.net-core - 无法解析类型“Data.ApplicationDbContext”的服务
- c - 为什么会发生这种情况?(C 编程错误)
- javascript - IE 抛出预期的冒号错误,在 Chrome 中有效吗?具有对象字面量和函数的对象数组
- python-3.x - 错误:在执行 pip3 install python-geohash 时,命令“x86_64-linux-gnu-gcc”失败,退出状态为 1
- javascript - 创建具有不同 %width 的新 div
- python - 将 numpy 数组列表转换为 5D numpy 数组
- azure-iot-edge - 如何将模拟数据从设备发送到 Azure IoT Edge 设备