无法使用Nativescript-Vue GridLayout显示项目列表

时间:2019-07-29 18:44:24

标签: nativescript-vue

Nativescript-vue新手在这里...

我正在使用 nativescript-vue 显示项目列表。加载.vue页时,网格应该只是一个空表。单击按钮后,网格中将填充我从服务中检索到的列表的子元素。我遇到两个问题:

  1. 只有一行,列表中的每个项目应该有一行。

  2. 日期将是日期元素,例如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

1 个答案:

答案 0 :(得分:0)

单击按钮后,您可以尝试使用v-if来渲染RadListView,或者手动使用load on demand