无法使用 Nativescript-Vue GridLayout 显示项目列表
Posted
技术标签:
【中文标题】无法使用 Nativescript-Vue GridLayout 显示项目列表【英文标题】:unable to display list of items with Nativescript-Vue GridLayout 【发布时间】:2019-12-07 03:27:15 【问题描述】:Nativescript-vue 新手在这里...
我正在使用 nativescript-vue 来显示项目列表。当 .vue 页面加载时,网格应该只是一个空表。单击按钮时,网格中会填充我从服务中检索到的列表的子元素。我遇到了两个问题:
只有一行,列表中的每个项目都应该有一行。
日期将是日期元素,例如 06-01-2019 11:30:01
,但我更愿意将其显示为 06-01-2019
在我的 *.vue 中:
<RadListView for="item in itemList" layout="grid" @itemTap="onItemTap">
<v-template>
<GridLayout rows="20, 20" class="list-item list-item-grid">
<GridLayout row="1" rows="25, 35" columns="auto, auto, auto, auto">
<Label col="0" :text="item.date" class="list-item-left" textWrap="true"verticalAlignment="middle" horizontalAlignment="left"></Label>
....
</GridLayout>
</GridLayout>
</v-template>
</RadListView>
....
<script>
expot default
data()
return
itemList: []
;
,
methods:
getItems()
// really simplified but it will return something like:
// ["date" :"09-01-2019 11:32:01", "name":" first last"]
service.getItemArray()
,
beforeMount: function()
this.itemList= this.getItems();
</script>
我放了一个缩短的 Playground 版本here:
【问题讨论】:
是的,我有一个控制台输出显示分配给 itemList 的空数组。我认为我担心的原始错误是一个已知问题:github.com/nativescript-vue/nativescript-vue/issues/529 【参考方案1】:您可以尝试在单击按钮后使用v-if
来渲染 RadListView,或者手动使用load on demand。
【讨论】:
以上是关于无法使用 Nativescript-Vue GridLayout 显示项目列表的主要内容,如果未能解决你的问题,请参考以下文章
Nativescript-vue TabView 无法呈现来自 API 的第一个项目
NativeScript-Vue Webpack 在设置时无法解析“styles/style-one”