Отображение данных массива в модальном компоненте nativescript-vue view - PullRequest
Новая
       13

Отображение данных массива в модальном компоненте nativescript-vue view

1 голос
/ 02 октября 2019

Я хочу создать модальный компонент из родительского и заполнить данные в этом модальном виде в виде списка

Если компонент уже был создан, у меня нет проблем, но я хочу, чтобы компонент был создан вэта родительская страница 

template>
    <Page class="page">
        <ActionBar title="Modal Data" class="action-bar"></ActionBar>
        <ScrollView>
            <StackLayout class="m-20">
                <Button text="Button" @tap="goToDetailPage" />
            </StackLayout>
        </ScrollView>
    </Page>
</template>

<script>
    const Detail = {
        template: `
    <Page>
        <ActionBar title="Asal Ikan" />
        <StackLayout>

            <ListView class="list-group" for="mylist in mylists" style="height:600px;">
                <v-template>
                <FlexboxLayout flexDirection="row" class="list-group-item">

                    <Label :text="mylist.name" style="width:100%;" @tap="closeModal" />

                </FlexboxLayout>
            </v-template>
            </ListView>



        </StackLayout>
     </Page>
        `
    };
    export default {
        data() {
            return {
                mylists: [{
                        code: "SL",
                        name: "Sinjai"
                    },
                    {
                        code: "MK",
                        name: "Makasar"
                    }
                ]
            };
        },
        methods: {

            goToDetailPage() {
                this.$showModal(Detail);
            }
        }
    };
</script>

Данные из моего списка не отображаются. вот ссылка на игровую площадку: https://play.nativescript.org/?template=play-vue&id=WlzgRU&v=104

1 Ответ

2 голосов
/ 02 октября 2019

Есть ряд вещей, которые вы можете улучшить / исправить в своем коде.

  1. Detail - это отдельный компонент, он не будет иметь доступа к данным в вашем Master (HelloWorld) компонент. Вы должны передать mylists в props, если хотите получить доступ к тем же данным.
  2. A Page может быть размещен только в пределах Frame, а действительный Page может иметь только ActionBar,Поскольку вы не определили Frame в своем Detail компоненте, он не будет действительным.
  3. С ListView используйте событие itemTap вместо добавления прослушивателей событий для отдельного компонента.

Обновленная игровая площадка

...