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

我们有一个小股票申请。这里我们列出了所有可用的库存。我们有一个

stocks.vue

组件、下面的代码和一个

stock.vue

组件。我们这里有4只股票。我们希望在2x2网格中渲染它们。下面的代码以1x4网格呈现它们。 一个

div.columns

最多可容纳12个

div.column

（Bulma），因此对于我们的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>

流通股：

从“/Stock.vue”导入库存；
导出默认值{
数据（）{
返回{
股票：[
{名称：'BMW'，值：'23'}，
{name:'Apple'，value:'223'}，
{name:'Sony'，value:'43'}，
{name:'EDA'，value:'235'}
]
}
},
组成部分：{
应用股票：股票
}
}

---

现在，有什么好方法可以重写上面的代码，使我们的股票呈现在2x2网格中？是否最好先在计算中重新排列数据，使其更恰当地表示或查看，即在本例中为二维对象数组？

您缺少的

是多行的
，而
是半行的
：

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


.
您缺少的
是多行的
，
是半行的
：

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


罗杜里科的回答绝对正确

将Bulma类“is multiline”添加到columns div，将“is half”类添加到stock column div，这是您需要（也应该）修改的全部内容，以实现所需的网格布局

正如罗杜里科提供的：

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

将数据组织到另一个结构中（如2D数组）意味着彼此共享一行的项目之间存在某种共享关系或公共性

[ [item1, item2], [item3, item4] ]

这种格式表明，项1和项2在某种程度上比项3和项4更密切相关，但事实并非如此

尽管可能有一些场景需要为显示数据而重新格式化数据，但在绝大多数场景中，应该在模板/布局中定义数据的显示方式


事实上，在2x2网格中显示2D数组中的数据不仅不是必需的（或有用的），而且这样做实际上可能会带来各种新的挑战

例如，如果要对数据进行排序或搜索，现在需要查看数组内部以比较值，或者说要添加或删除项目，现在需要修改更多的数组，而不仅仅是一个数组

在这种情况下，这些更改不会带来这样的挑战，因为如果应用于stocks对象，其计算属性将自动反映这些更改。但我认为这一点仍然相关。无论何时修改阵列，都必须创建和填充更复杂的数据类型，这不会更快。如果您想要的结果可以通过添加最少的CSS类或规则来实现，那么这就是应该采取的方法

我希望这能回答你问题的另一半。
罗杜里科的回答绝对正确

将Bulma类“is multiline”添加到columns div，将“is half”类添加到stock column div，这是您需要（也应该）修改的全部内容，以实现所需的网格布局

正如罗杜里科提供的：

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

将数据组织到另一个结构中（如2D数组）意味着彼此共享一行的项目之间存在某种共享关系或公共性

[ [item1, item2], [item3, item4] ]

这种格式表明，项1和项2在某种程度上比项3和项4更密切相关，但事实并非如此

尽管可能有一些场景需要为显示数据而重新格式化数据，但在绝大多数场景中，应该在模板/布局中定义数据的显示方式


事实上，在2x2网格中显示2D数组中的数据不仅不是必需的（或有用的），而且这样做实际上可能会带来各种新的挑战

例如，如果要对数据进行排序或搜索，现在需要查看数组内部以比较值，或者说要添加或删除项目，现在需要修改更多的数组，而不仅仅是一个数组

在这种情况下，这些更改不会带来这样的挑战，因为如果应用于stocks对象，其计算属性将自动反映这些更改。但我认为这一点仍然相关。无论何时修改阵列，都必须创建和填充更复杂的数据类型，这不会更快。如果您想要的结果可以通过添加最少的CSS类或规则来实现，那么这就是应该采取的方法

我希望这能回答你问题的另一半。
非常感谢。我确实错过了。我想这回答了我的问题。然而，这个问题仍然代表vue js部分。想知道实际呈现标记的最佳方法是什么。：）但既然它确实解决了问题，我就接受它。非常感谢。我确实错过了。我想这回答了我的问题。然而，这个问题仍然代表vue js部分。想知道实际呈现标记的最佳方法是什么。：）但既然它确实解决了问题，我就接受它。