Showing array data in nativescript-vue view modal component - vue.js

Question

I want to create a modal component from the parent and fill data in that modal in a listview
If the component was already created, I don't have a problem, but I want the component created in that parent page
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>
Data from my List is not showing.
here the playground link :
https://play.nativescript.org/?template=play-vue&id=WlzgRU&v=104

Answer 1

There are a number of things you may want to improve / correct in your code.
Detail is a standalone component, it won't have access to the data in your Master (HelloWorld) component. You should pass mylists in props if you like to access the same data.
A Page can only be hosted within a Frame and a valid Page can only have ActionBar. Since you haven't defined a Frame in your Detail component, it won't be valid.
With ListView use itemTap event instead of adding event listeners to individual component.
Updated Playground