vue.js - 如何在 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"]
    }
  }

如何动态地将rowandcolumn属性分配给<label>？我可以手动完成，但不能循环遍历数组。我希望它井井有条，比如

一个 | 乙

C | D

E | F

Answer 1

使用计算属性根据项目数计算行数。然后根据索引为每个标签绑定行和列。

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

游乐场样本