Tabview not showing data in first tab in nativescript-vue

Question

I have place a Tabview in my component with 2 tabs. In the first i'm loading some data from an API and render a ListView with data. In the other tab i'm showing some other data.

The data from the API is not showing when the component is first show, I have tab press the tab 2 and then tab 1 and the data is then shown.

<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);
    });  
},

I want the data to be show when the component is first show because the tab 1 is marked as the showing tab. Any ideas?

Here is an example in the playground: https://play.nativescript.org/?template=play-vue&id=9Fk7AS&v=10

Can show the JS code that gets the data? Or just create an Playground example? play.nativescript.org/?template=play-vue — Steven
From where comes the result? Do you use there async? Can you make a playground as example. Because I don't see any issues why It won't work. — Steven
I have added a playground where you can see the a code example making the same error :-) — Maiken Madsen
When you submit a Playground, make sure you add necessary working code that will demonstrate your issue - you were missing the imports for ObservableArray. Otherwise the list seems to work as expected. — Manoj

Maiken Madsen Maiken Madsen · Accepted Answer · 2019-07-03T07:22:21

The answear is in the issue I commited for the repository in github: https://github.com/nativescript-vue/nativescript-vue/issues/515

Just change:

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

To:

<TabView>

Tabview not showing data in first tab in nativescript-vue

1 Answers