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

Posted 2023-04-13

【中文标题】Nativescript-vue TabView 无法呈现来自 API 的第一个项目

【英文标题】：Nativescript-vue TabView unable to render first item coming from API

【发布时间】：2020-10-28 19:39:36

【问题描述】：

情况：

我正在开发 nativescript-vue 应用程序，我使用 TabView 项目来创建选项卡。选项卡的标题和选项卡内的信息是从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> 

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

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

我尝试过的解决方案

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

提前谢谢你！

【参考方案1】：

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

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

【讨论】：

我之前尝试过但没有运气，我刚刚尝试过，还是一样。我必须先点击第三个标签，然后才加载其他标签。

您能否更新您的问题以显示您设置从 http 请求接收它们的项目时的代码？

完成，你能检查一下吗。

好的。尽管我将它放在一个方法中，然后在挂载的 Hook 中调用该方法，而不是把所有东西都放在那里，但我在那里看不到问题。但是，我注意到 tabViewItem 有一个 loaded="mainContentLoaded" 但我看不出这是什么。

Loaded="mainContentLoaded" 位是我尝试的其他可能的解决方案。你能解释得更清楚吗？非常感谢。