Question

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

相册名称
乐队名称
拥有
年份
借来的

代码中没有顺序。

我知道这一点：

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

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

还-我不知道这是什么？

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

我认为您无法从index控制source，但可以使用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>

如何使用radDataForm和JSON源更改字段显示顺序

iPhone屏幕快照：

1 个答案: