Как отобразить элементы в CSS-сетке с помощью Vue.js


Как отобразить элементы в CSS-сетке с помощью Vue.js

23.10.2020 12:47:23 Просмотров 49 Источник

У меня есть список автомобилей, как показано ниже:

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

Я хочу отобразить элементы в css-сетке с 5 столбцами.

Если я использую код 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-для всех свойств автомобиля становится дочерним элементом корневого div. Поэтому, по сути, я хочу, чтобы все "дочерние дивы" были корнем одного CSS grid div. Как я могу этого достичь?

enter image description here

С VueJS 2

У вопроса есть решение - Посмотреть?

Ответы - Как отобразить элементы в CSS-сетке с помощью Vue.js / How to display items in a CSS grid with Vue.js

Является ответом!
Boussadjra Brahim

23.10.2020 01:03:02

Сделайте заголовок таблицы в одной сетке и строки таблицы в другой сетке :

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>

RaelB

23.10.2020 02:49:14

Лучшим решением, которое я нашел, было использование Vue-фрагмента из https://github.com/Thunberg087/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: есть ли что-то вроде React.Фрагмент в Vue?

Помочь в развитии проекта:
Закрыть X