如何在网格中动态渲染元素

Question

我正在尝试创建一个布局，其中每行包含 3 张卡片。为此，我尝试使用 bootstrap 的网格布局，以使其响应。

但问题是我会有 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 本身。

如何在网格布局中动态呈现卡片？

Answer 1

您可以尝试使用计算的属性为您对数组进行排序。

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

然后您可以遍历模板中的行。像这样

<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}}</pre>
                        </b-card-text>
                        <b-button href="#" variant="primary">Go somewhere</b-button>
                    </b-card>
                </b-col>
                </b-col>
            </b-row>
        </b-container>
    </div>
</template>

我不知道你的数据是什么样的，但建议在使用 v-for 时也包含一个密钥。如果您的数据不包含合适的属性，您可以使用数组索引作为键。在这里查看更多 https://vuejs.org/v2/guide/list.html#Maintaining-State

如何在网格中动态渲染元素

How to dynamically render elements in a grid

javascript

css

grid-layout

vue.js

bootstrap-vue