Question

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

首次显示该组件时，API的数据没有显示，我先用Tab键按Tab 2，然后按Tab 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

Answer 1

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

只需更改：

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

收件人：

<TabView>

TabView在nativescript-vue的第一个选项卡中不显示数据

1 个答案: