在 nativescript-vue 视图模式组件中显示数组数据答案

【问题标题】：Showing array data in nativescript-vue view modal component在 nativescript-vue 视图模式组件中显示数组数据
【发布时间】：2020-01-31 10:05:20
【问题描述】：

我想从父级创建一个模态组件并在列表视图中填充该模态中的数据

如果组件已经创建，我没有问题，但我希望在该父页面中创建组件

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

【问题讨论】：

标签： vue.js nativescript nativescript-vue

【解决方案1】：

您可能希望在代码中改进/纠正许多事情。

Detail 是一个独立组件，它无法访问您的 Master (HelloWorld) 组件中的数据。如果您想访问相同的数据，您应该在 props 中传递 mylists。
Page 只能托管在Frame 中，而有效的Page 只能有ActionBar。由于您尚未在 Detail 组件中定义 Frame，因此它无效。
使用 ListView 使用 itemTap 事件，而不是向单个组件添加事件侦听器。

Updated Playground

【讨论】：