如何使用 Vue.js 在 CSS 网格中显示项目

Posted 2023-02-23

【中文标题】如何使用 Vue.js 在 CSS 网格中显示项目

【英文标题】：How to display items in a CSS grid with Vue.js

【发布时间】：2021-02-06 09:12:04

【问题描述】：

我有一个汽车清单如下：

<script>

const sampleCars = [
  
    id: 1,
    name: 'Cressida',
    model: 'XXC',
    manufacturer: 'Toyota',
    price: '$10,000',
    inEditMode: false 
  ,
  
    id: 2,
    name: 'Corolla',
    model: 'ZD-2',
    manufacturer: 'Toyota',
    price: '$12,000',
    inEditMode: false 
  ,
  
    id: 3,
    name: 'Condor',
    model: '27-9',
    manufacturer: 'Mazda',
    price: '$8,000',
    inEditMode: false 
  
]

export default 
  data() 
    return 
      cars: sampleCars
    
  



</script>

<style>
.grid 
  display: grid;
  grid-template-columns: repeat(5, auto);
  gap: 10px;


</style>

我想在 5 列的 CSS 网格中显示项目。

如果我使用如下 vue 代码：

<template>
  <div >
    <div class="grid">
      <div>Name</div>
      <div>Model</div>
      <div>Manufacturer</div>
      <div>Price</div>
      <div>buttons</div>      
    </div>
    <div v-for="car in cars" :key="car.id" class="grid">
      <div>car.name</div>  // "child div"
      <div>car.model</div>
      <div>car.manufacturer</div>
      <div>car.price</div>
      <div>buttons</div>
    </div>
  </div>
</template>

这段代码的问题是每个项目都显示在自己的网格中。 （因此未对齐，如下图所示）。使用 v-for 所有汽车属性成为根 div 的子级。所以基本上我希望所有“子 div”成为一个 CSS 网格 div 的根。我怎样才能做到这一点？

使用 VueJS 2

【问题讨论】：

好吧，你为每一行分配了网格类，所以每一行都是它自己的网格。有很多关于如何使用 CSS 网格创建表格的资源，你应该看看一些。

【参考方案1】：

在一个网格中制作表格标题，在另一个网格中制作表格行：

Vue.config.devtools = false;
Vue.config.productionTip = false;
const sampleCars = [
    id: 1,
    name: 'Cressida',
    model: 'XXC',
    manufacturer: 'Toyota',
    price: '$10,000',
    inEditMode: false
  ,
  
    id: 2,
    name: 'Corolla',
    model: 'ZD-2',
    manufacturer: 'Toyota',
    price: '$12,000',
    inEditMode: false
  ,
  
    id: 3,
    name: 'Condor',
    model: '27-9',
    manufacturer: 'Mazda',
    price: '$8,000',
    inEditMode: false
  
]

new Vue(
  el: '#app',

  data() 
    return 
      cars: sampleCars
    
  
)

.grid 
  display: grid;
  grid-template-columns: repeat(5, minmax(92px,1fr));
  gap: 10px;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>


<div id="app" class="container">

  <div>
    <div class="grid">
      <div>Name</div>
      <div>Model</div>
      <div>Manufacturer</div>
      <div>Price</div>
      <div>buttons</div>
    </div>
    <div v-for="car in cars" :key="car.id">
      <div class="grid">
        <div>car.name</div>
        <div>car.model</div>
        <div>car.manufacturer</div>
        <div>car.price</div>
        <div>buttons</div>
      </div>
    </div>
  </div>
</div>

【讨论】：

是的，这就是我要找的，但是对我不起作用。在编译错误消息中它说“迭代中的元素期望具有'v-bind：key'”。而且，我不能将 :key 与模板元素一起使用“'

【参考方案2】：

我发现的最佳解决方案是使用来自 https://github.com/Thunberg087/vue-fragment 的 Vue-Fragment

v-for 循环中的子元素最终将位于根级别：

<template>
  <div >
    <div class="grid">
      <div>Name</div>
      <div>Model</div>
      <div>Manufacturer</div>
      <div>Price</div>
      <div>buttons</div>  

      <fragment v-for="car in cars" :key="car.id"  >
        <div>car.name</div>
        <div>car.model</div>
        <div>car.manufacturer</div>
        <div>car.price</div>
        <div>buttons</div>
      </fragment>     
    </div>   

  </div>
</template>

另请参阅这个 SO 问题：Is there something like React.Fragment in Vue?