如何在 GridLayout 中动态排列项目？

Question

我正在通过遍历 Nativescript-Vue 中的数组来打印一些标签。我希望标签排列在网格中。这是我的模板：

<GridLayout columns="auto,auto" rows="auto,auto">
  <label
    v-for="(item, index) in items"
    :text="item"
    :key="index"
  />
</GridLayout>

这是 items 数组：

export default {
  data() {
    return {
      items: ["A", "B","C","D","E","F"]
    }
  }

如何将 row 和 column 属性动态分配给 <label> ？我可以手动完成，但那时将无法循环遍历数组。我希望它井井有条，比如

一个 | B

C | D

E | F

Answer 1

使用computed 属性根据项目数计算行数。然后根据索引为每个Label绑定行&列。

<template>
    <Page class="page">
        <ActionBar title="Home" class="action-bar" />
        <ScrollView>
            <GridLayout columns="*,*" :rows="rows">
                <Label v-for="(item, index) in items" :text="item" :key="index"
                    :row="index / 2" :col="index % 2" class="h1"></Label>
            </GridLayout>
        </ScrollView>
    </Page>
</template>

<script>
    export default {
        data() {
            return {
                items: ["A", "B", "C", "D", "E", "F"]
            };
        },
        computed: {
            rows: function() {
                const rows = [];
                for (let i = 0; i < this.items.length / 2; i++) {
                    rows.push("auto");
                }
                return rows.join(",");
            }
        }
    };
</script>

Playground Sample

如何在 GridLayout 中动态排列项目？

How to dynamically arrange items in a GridLayout?

vue.js

nativescript

nativescript-vue