Как динамически отображать элементы в сетке - PullRequest
Новая
       26

Как динамически отображать элементы в сетке

0 голосов
/ 07 июня 2019

Я пытаюсь создать макет, в котором каждая строка будет содержать 3 карты. для этого я попытался использовать Grid-макет начальной загрузки, чтобы сделать его отзывчивым.

Но проблема в том, что у меня будут данные карт в формате JSON. длина массива объектов JSON может варьироваться, т. е. количество карт, отображаемых на экране, может различаться.

Мне нужно как-то динамически его визуализировать, используя ViewJS, bootstrap-vue & JSON.

Я понял, что Количество объектов в JSON будет относиться к количеству карточек на экране и number of cards/ 3 = number of rows

Я не понимаю, как визуализировать карты в сетке динамически.

Я использую Vue-js и bootstrap-vue, чтобы выполнить задачу, но я застрял с ней.

CardRenderer.vue: 

<template lang="html">

  <div>
    <hr>   
    <b-container class="bv-example-row">
  <b-row>
    <b-col>
      <b-card
        title= "renderObject.title"
        img-src="https://picsum.photos/600/300/?image=25"
        img-alt="Image"
        img-top
        tag="article"
        style="max-width: 20rem;"
        class="mb-2"
      >
      <b-card-text>
        Some quick example text to build on the card title and make up the bulk of the card's content.
      </b-card-text>

      <b-button href="#" variant="primary">Go somewhere</b-button>
      </b-card>
    </b-col>
    <b-col>
      <b-card
        title= "renderObject.title"
        img-src="https://picsum.photos/600/300/?image=25"
        img-alt="Image"
        img-top
        tag="article"
        style="max-width: 20rem;"
        class="mb-2"
      >
      <b-card-text>
        Some quick example text to build on the card title and make up the bulk of the card's content.
      </b-card-text>

      <b-button href="#" variant="primary">Go somewhere</b-button>
      </b-card>
    </b-col>
    <b-col>
      <b-card
        title= "renderObject.title"
        img-src="https://picsum.photos/600/300/?image=25"
        img-alt="Image"
        img-top
        tag="article"
        style="max-width: 20rem;"
        class="mb-2"
      >
      <b-card-text>
        Some quick example text to build on the card title and make up the bulk of the card's content.
      </b-card-text>

      <b-button href="#" variant="primary">Go somewhere</b-button>
      </b-card>
    </b-col>
  </b-row>
</b-container>

  </div>

</template>

<script lang="js">
  export default  {
    name: 'CardRenderer',
    props: {
      passer: Object
    },
    mounted() {
      // eslint-disable-next-line
      console.log(this.renderObject);
    },
    data() {
      return {

      }
    },
    methods: {

    },
    computed: {

    }
  }
</script>

<style scoped>

</style>

Это своего рода статическая структура страницы. Все карты, которые обрабатываются, должны отображаться в соответствии с переданным JSON, а все данные хранятся в самом JSON.

Как динамически отображать карты в сетке?

1 Ответ

1 голос
/ 07 июня 2019

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

<script lang="js">
    export default {
        name: 'CardRenderer',
        props: {
            passer: Object
        },
        mounted() {
            // eslint-disable-next-line
            console.log(this.renderObject);
        },
        data() {
            return {

            }
        },
        methods: {

        },
        computed: {
            rows() {
                var rows = []
                var itemsPerRow = 3
                // assuming passer is an array of items..
                var arr = this.passer
                for (var i = 0; i<arr.length; i+=itemsPerRow){
                    var row = []
                    for (var z = 0; z<itemsPerRow; z++) {
                        row.push(arr[i + z])
                    }
                    rows.push(row)
                }
                return rows
            }
        }
    }
</script>

Затем вы можете перебирать строки в вашем шаблоне.Как то так 

<code><template lang="html">
    <div>
        <hr>
        <b-container class="bv-example-row">
            <b-row v-for="row in rows">
                <b-col v-for="item in row">
                    <!-- you card -->
                    <b-card title="renderObject.title" img-src="https://picsum.photos/600/300/?image=25" img-alt="Image" img-top tag="article" style="max-width: 20rem;" class="mb-2">
                        <b-card-text>
                            <h1>item data:</h1>
                            <pre>{{item}}
Иди куда-нибудь

Я не знаю, как выглядят ваши данные, но при использовании v-for рекомендуется также включать ключ.Если ваши данные не содержат подходящего атрибута для этого, вы можете использовать индекс массива в качестве ключа.Подробнее здесь https://vuejs.org/v2/guide/list.html#Maintaining-State

...