vue.js - 在 nativescript-vue 视图模式组件中显示数组数据
问题描述
我想从父级创建一个模态组件并在列表视图中填充该模态中的数据
如果组件已经创建,我没有问题,但我希望在该父页面中创建组件
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
解决方案
您可能希望在代码中改进/纠正许多事情。
Detail
是一个独立的组件,它无法访问您的Master
(HelloWorld) 组件中的数据。如果您想访问相同的数据,mylists
您应该传入。props
- A
Page
只能在 a 中托管,Frame
而有效的Page
只能有ActionBar
. 由于您尚未Frame
在Detail
组件中定义 a,因此它将无效。 - 使用 ListView 使用
itemTap
事件而不是向单个组件添加事件侦听器。
推荐阅读
- excel - 是否可以将用户表单文本框中的值粘贴到用户表单外部按钮的单元格中?
- c++ - 解析 xml 时无法获取属性的名称和值
- html - 是否可以在电子邮件 HTML 和 CSS 中创建移动响应字体大小?
- python - 有没有办法使用 Python 从目录中的所有文件加载数据?
- html - 如何将图像重叠在一个圆圈上?
- java - - 和 - 之间有什么区别,我该如何解决?
- php - 使用 preg_match 循环数组
- java - 值在java spring控制器中使用post方法接收null
- c++ - 如何将用户输入数组值移动到数组末尾并将其设置为 0?
- php - 如何按具有多个条目的相关表进行排序?