Как создать динамическую сетку, используя VUE? - PullRequest
Новая
       10

Как создать динамическую сетку, используя VUE?

0 голосов
/ 29 августа 2018

Каков наилучший способ динамического создания сетки с помощью Vue?

Я думал об использовании цикла v-for для генерации карточек на странице для X числа «модулей», но хотел бы расположить их в ряды по 3.

например, 

 Card | Card | Card
 Card | Card | Card

1 Ответ

0 голосов
/ 29 августа 2018

Вы можете использовать CSS сетку , обязательно проверьте поддержка браузера .

Нам нужно сделать контейнер контейнером сетки, используя display: grid и использовать grid-template-columns.

Вы можете создать компонент, который принимает числовой подпор, а затем использовать его в нотации repeat().

repeat({numberOfColumns}, minmax({minColumnSize}, {maxColumnSize}))

new Vue({
  el: "#app",
  data() {
    return {
      cards: [1, 2, 3, 4],
      numberOfColumns: 3,
    }
  },
  computed: {
    gridStyle() {
      return {
        gridTemplateColumns: `repeat(${this.numberOfColumns}, minmax(100px, 1fr))`
      }
    },
  },
  methods: {
    addCard() {
      this.cards.push('new-card')
    },
  },
})

Vue.config.productionTip = false;
Vue.config.devtools = false;
.card-list {
  display: grid;
  grid-gap: 1em;
}

.card-item {
  background-color: dodgerblue;
  padding: 2em;
}

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

ul {
  list-style-type: none;
}
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<div id="app">
  Columns: <input v-model.number="numberOfColumns">
  <ul :style="gridStyle" class="card-list">
    <li v-for="(card, index) in cards" class="card-item">
      {{ index + 1 }}
    </li>
  </ul>
  <button @click="addCard">
    Add card
  </button>
</div>
...