时间戳

首页 > 解决方案 > 在网格中渲染多个组件

vue.js - 在网格中渲染多个组件

问题描述

Imagen 我们有一个小的股票应用程序。在这里，我们列出了所有可用库存。我们有一个stocks.vue组件、下面的代码和一个stock.vue组件。我们这里有 4 只股票。我们想在 2x2 网格中渲染它们。下面的代码将它们呈现在 1x4 网格中。Adiv.columns最多可容纳 12 个div.column（布尔玛），因此对于我们的 2x2 网格，我们需要两个div.columns每个持有两个div.column，每个div.column持有一个股票。

<template>
    <div>
        <p>Current stocks:</p>
        <div class="columns">
            <div class="column" v-for="stock in stocks">
                <app-stock :stock="stock"></app-stock>
            </div>
        </div>
    </div>
</template>

<script>
    import Stock from './stock.vue';

    export default {
        data() {
            return {
                stocks: [
                    { name: 'BMW', value: '23' },
                    { name: 'Apple', value: '223' },
                    { name: 'Sony', value: '43' },
                    { name: 'EDA', value: '235' }
                ]
            }
        },
        components: {
            appStock: Stock
        }
    }
</script>

现在，有什么好的方法可以重写上面的代码，以便将我们的股票呈现在 2x2 网格中？首先在计算中重新排列我们的数据，以便它更恰当地表示或查看，即在这种情况下为对象的二维数组，是否会更好？

标签： vue.js

解决方案

你失踪了is-multiline，并且is-half：

    <div class="columns is-multiline">
        <div class="column is-half" v-for="stock in stocks">
            <app-stock :stock="stock"></app-stock>
        </div>
    </div>

可以在此处找到有关它的文档。

推荐阅读