时间戳

首页 > 解决方案 > Tabview 未在 nativescript-vue 的第一个选项卡中显示数据

vue.js - Tabview 未在 nativescript-vue 的第一个选项卡中显示数据

问题描述

我在我的组件中放置了一个带有 2 个选项卡的 Tabview。首先，我从 API 加载一些数据并用数据呈现 ListView。在另一个选项卡中，我显示了一些其他数据。

首次显示组件时，API 中的数据未显示，我有选项卡按选项卡 2，然后按选项卡 1，然后显示数据。

<template>
 <Page class="page">

   <TabView :selectedIndex="selectedIndex" 
    @selectedIndexChange="indexChange">

     <TabViewItem title="Tab 1">
            <StackLayout  orientation="vertical">

              <ListView height="90%" class="list-group"
                for="item in allCategories">
                <v-template>
                    <StackLayout class="list-group-item" 
                      orientation="horizontal">
                    <Image :src="item.imageURL" 
                     stretch="aspectFill" class="categoryImage" 
                     width="75" height="75">
                    </Image>
                    <Label class="categoryText" 
                     :text="item.element.groupText"/>
                    </StackLayout>
                </v-template>
              </ListView>

            </StackLayout> 
     </TabViewItem>
     <TabViewItem title="Tab 2">
        <Label text="Content for Tab 2" />
     </TabViewItem>
    </TabView>
</Page>
</template>




created: function () {"url").then(result => {
        result.data.forEach(element => {
            var imageURL = element.image.imageURL;
            this.allCategories.push({element, imageURL })
        });
    }, error => {
        console.log(error);
    });  
},

我希望在组件首次显示时显示数据，因为选项卡 1 被标记为显示选项卡。有任何想法吗？

这是操场上的一个例子：https ://play.nativescript.org/?template=play-vue&id=9Fk7AS&v=10

标签： vue.jsnativescriptnativescript-vue

解决方案

答案在我为 github 中的存储库提交的问题中：https ://github.com/nativescript-vue/nativescript-vue/issues/515

只是改变：

<TabView :selectedIndex="selectedIndex" @selectedIndexChange="indexChange">

到：

<TabView>

推荐阅读