Question

我正在尝试创建一个布局，其中每行将包含3张卡片。为此，我尝试使用Bootstrap的Grid布局，以使其具有响应性。

但是问题是我将拥有JSON格式的卡片数据。并且JSON Object数组的长度可能会发生变化（即，要在屏幕上呈现的卡片数量可能会发生变化）。

我有些需要如何使用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

了解更多

如何动态呈现网格中的元素

1 个答案: