javascript - Nativescript-vue TabView 无法呈现来自 API 的第一个项目

Question

情况：

我正在开发 nativescript-vue 应用程序，我使用TabViewItems 创建选项卡。选项卡的标题和选项卡内的信息是从JSON数据文件中循环的。

问题：

第一个 tabviewitem 不呈现任何信息。为了查看数据，我必须先单击其他选项卡返回第一个选项卡。之后，我可以看到项目

我必须使用以下标签创建标签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> 

子类别是JSON来自 API 的数组，具有以下结构。

[
    {
        "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"
            }
        ]
    }
]

我尝试过的解决方案

1. https://github.com/nativescript-vue/nativescript-vue/issues/515

但没有运气

[更新]这是我的脚本：

            <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>

更新 2：

我在 nativescript 操场上创建了一个类似的问题。 https://play.nativescript.org/?template=play-vue&id=7mNLr7

先感谢您！

标签： javascriptandroidvue.jsnativescriptnativescript-vue

Answer 1

向您的迭代项目添加 :key 是否可以解决问题？

<TabViewItem v-for="subcategory in subcategories" 
            :key="some_unique_value_between_them" 
            :title="subcategory.name" 
             loaded="mainContentLoaded">