无法使用 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”

Nativescript-Vue:如何在 ListView 中正确使用 v-for

Nativescript-vue graphql 后端?

NativeScript-vue 自定义开关不起作用

用于 Nativescript-Vue 的搜索栏的 DismissSoftInput()