Issue:
Currently, I am developing a NativeScript-Vue application in which I am utilizing TabView Items to generate tabs. The tab title and content are populated from a JSON data file through a loop.
Challenge:
The first tabView item is not displaying any information initially. I have noticed that in order to view the data, I need to click on other tabs first and then return to the first tab. Only then the items become visible.
Here is the code snippet used to create tabs using NativeScript-Vue:
<TabView
android:tabBackgroundColor="#ffffff"
android:tabTextColor="#ffa801"
android:selectedTabTextColor="#f53b57"
androidSelectedTabHighlightColor="#ffffff"
androidTabsPosition="Bottom">
<TabViewItem v-for="subcategory in subcategories" :title="subcategory.name" >
<FlexboxLayout>
<Label :text="subcategory.name" />
</FlexboxLayout>
</TabViewItem>
</TabView>
Subcategories is an array fetched from the API in the JSON format with the following structure.
[
{
"id": 3,
"category_id": 1,
"name": "Vegetarian",
"description": "Vegetarian",
"items": [
{
"id": 6,
"subcategory_id": 3,
"name": "Salad",
"description": "test",
"price": "100",
"status": "1",
}
]
},
{
"id": 2,
"category_id": 1,
"name": "Sea Food",
"description": "sea food",
"items": [
{
"id": 4,
"subcategory_id": 2,
"name": "some item",
"description": "desc",
"price": "100",
"status": "1",
}
]
}
]
Attempted Solutions:
Even after exploring the provided solutions, the issue persists
[Update] Sample Script:
<script >
import axios from 'axios';
import Login from "./Login";
import FoodItems from "./FoodItems"
import SubCategories from "./parts/SubCategories"
import CategoryButtons from "./parts/CategoryButtons"
import Popular from "./parts/Popular"
// import Items from "./Items"
export default {
components: {SubCategories, CategoryButtons, Popular},
props: ['parentCategory'],
data() {
return {
subcategories: [],
populars: [],
categories:this.$store.getters.getCategories,
}
},
mounted(){
axios({
method:"GET",
"url":this.$store.state.apiUrl+"categories/"+this.parentCategory.id+"/subcategories",
headers:{
'Accept': 'application/json',
'Authorization': 'Bearer ' + this.$store.getters.getToken,
}
}).then(
response =>
{
//
this.subcategories =response.data.fooditems;
this.populars = response.data.popularitems;
// console.log(response.data.popularitems);
}, error => {
console.error(error);
}
);
},
methods: {
checkToken() {
this.$store.commit("loadFromStorage");
if(!this.$store.getters.getToken) { this.$navigateTo(Login, { clearHistory: true }) }
},
goToShowCase(args) {
// console.log(args);
this.$navigateTo(Showcase,
{
props:
{ parentCategory: args }
});
}
}
}
</script>
Update 2:
I have replicated the issue on the NativeScript playground platform. Link to the example:
Thank you for your assistance!