Situation:
Im working on nativescript-vue app where im using TabView Items to create tabs. The title for tab and the information inside the tab is being for looped from JSON data file.
Problem:
The first tabviewitem doesnt render any information. Inorder to see the data, i have to click on other tabs first go back to first tab. After that, i can see the items
The markup i have to create tab 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 JSON array coming from API with following structure.
[
{
"id": 3,
"category_id": 1,
"name": "Vegetarian",
"ar_name": null,
"description": "Vegetarian",
"ar_description": null,
"image": null,
"created_at": "2020-03-04 04:12:13",
"updated_at": "2020-03-04 04:12:13",
"items": [
{
"id": 6,
"subcategory_id": 3,
"name": "Salad",
"ar_name": null,
"description": "test",
"ar_description": null,
"price": "100",
"status": "1",
"ar_price": null,
"discount": null,
"discount_colour": null,
"created_at": "2020-05-07 05:32:17",
"updated_at": "2020-05-07 05:32:17"
}
]
},
{
"id": 2,
"category_id": 1,
"name": "Sea Food",
"ar_name": null,
"description": "sea food",
"ar_description": null,
"image": null,
"created_at": "2020-03-04 04:11:38",
"updated_at": "2020-03-04 04:11:38",
"items": [
{
"id": 4,
"subcategory_id": 2,
"name": "some item",
"ar_name": null,
"description": "desc",
"ar_description": null,
"price": "100",
"status": "1",
"ar_price": null,
"discount": null,
"discount_colour": null,
"created_at": "2020-05-06 12:02:58",
"updated_at": "2020-05-06 12:02:58"
}
]
}
]
Solutions that i have tried
but no luck
[Update] here is my 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 created a similar issue on nativescript playground. https://play.nativescript.org/?template=play-vue&id=7mNLr7
Thank you in advance!
