Как изменить порядок отображения полей, используя radDataForm с источником JSON

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

Я не думаю, что вы могли бы контролировать 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>