如何使用带有 JSON 源的 radDataForm 更改字段显示顺序

Question

使用 Vue.js / NativeScript (radDataForm) 我想在使用 JSON 作为源时重新排序字段的显示。我当前的代码有效，但显示为：

1. 专辑名称
2. 乐队名称
3. 拥有
4. 年份
5. 借来的

这不是代码中的顺序。

我知道这一点：

<df:EntityProperty name="albumName" displayName="Name of Album" index="0" />

但是，如何将index="0"添加到我的 JSON 对象？

另外 - 我不知道这是做什么的？

str: "",
bool: false

示例代码：

<template>
    <Page class="page">
        <ActionBar title="JSON example" class="action-bar" />
            <RadDataForm :source="album" />
    </Page>
</template>

    <script>
        import Vue from "nativescript-vue";
        import RadDataForm from "nativescript-ui-dataform/vue";
        Vue.use(RadDataForm);

        export default {
            data() {
                return {
                    album: {
                        bandName: "Beatles",
                        albumName: "Seargent Peppers",
                        year: "2017",
                        owned: true,
                        borrowed: true
                    },
                    str: "",
                    bool: false
                };
            }
        };
    </script>     

iPhone 截图：

Answer 1

我认为您无法从 source 控制 index，但您可以使用 metadata 来控制。

示例

<template>
  <Page class="page">
    <ActionBar title="JSON example" class="action-bar" />
    <RadDataForm :source="album" :metadata="metadata" />
  </Page>
</template>

<script>
    import Vue from "nativescript-vue";
    import RadDataForm from "nativescript-ui-dataform/vue";
    Vue.use(RadDataForm);

    export default {
        data() {
            return {
                album: {
                    bandName: "Beatles",
                    albumName: "Seargent Peppers",
                    year: "2017",
                    owned: true,
                    borrowed: true
                },
                metadata: {
"isReadOnly": false,
"propertyAnnotations":
    [
        {
            "name": "bandName",
            "index": 0
        },
        {
            "name": "albumName",
            "index": 1
        },
        {
            "name": "year",
            "index": 2
        },
        {
            "name": "owned",
            "index": 4
        },
        {
            "name": "myRating",
            "index": 3
        }
    ]
}
            };
        }
    };
</script>