如何根据 nativescript vue 中的道具值过滤数组？

Posted 2023-04-13

【中文标题】如何根据 nativescript vue 中的道具值过滤数组？

【英文标题】：How to filter an array based on props value in nativescript vue?

【发布时间】：2021-03-07 01:51:20

【问题描述】：

我上周学习了nativescript vue，作为任务的一部分，我将在sails js 上转移一个web 应用程序来制作一个移动应用程序并在nativescript preview 上预览它。我有一个全局变量 global.malls，它是在 app.js 中定义的一个数组，并且正在我的第二个选项卡中创建一个基于它的列表视图，就像这样

                <TabContentItem>
                    <ListView for="mall in malls" @itemTap="onSecondTab"
                        style="height:1250px">
                        <v-template>
                            <StackLayout orientation="vertical" >
                                <Label :text="mall.mall" class="h2" />
                            </StackLayout>
                        </v-template>
                    </ListView>
                </TabContentItem>

点击项目，我转到第二页，该页应该列出这个商场内的商店。使用方法

    onSecondTab: function(args) 
                    console.log("Item with index: " + args.index + " tapped");
                    console.log("Mall tapped: " + args.item.mall);
    
                    this.$navigateTo(MallShop, 
                        transition: ,
                        props: 
                            tappedProduct: args.item
                        
                    );
                

在第二页上，我想列出这些商店，但我很难根据这个 tappedProduct.mall（代表被窃听的商场名称）过滤我现有的商店数组。我尝试使用计算，并创建一个 mount() 生命周期钩子来过滤现有数组并显示它（在导出默认值内），但它都不起作用。 coupons 是一个空数组，由我对 web 应用程序的 fetch 调用填充。商店也是一个空数组，我正在尝试从优惠券中过滤结果。

    <template>
        <Page>
            <ListView for="shop in shopsPresent" style="height:1250px">
                <v-template>
                    <StackLayout orientation="vertical" >
                        <Label :text="shop.restaurant" class="h2" />
                    </StackLayout>
                </v-template>
            </ListView>
        </Page>
    </template>

    async mounted() 
                var response = await fetch(global.baseUrl + "/shop/json");
    
                if (response.ok) 
                    this.coupons = await response.json();
                    console.log(JSON.stringify(this.coupons));
                 else 
                    console.log(response.statusText);
                

                this.shops = this.coupons.filter(function (p) 
                    return p.mall == "tappedProduct.mall";
                );

            ,

    computed: 
                shopsPresent: function() 
                    return this.coupons.filter(function(p) 
                        return p.mall == "tappedProduct.mall";
                    );
                
            ,

【问题讨论】：

您的代码看起来正确。试试ns clean 然后ns debug android --no-hmr

我试过了。它没有帮助。一位课程伙伴还指出，我应该使用 ' ' 而不是 " "，因为 javascript 双引号将其读取为字符串，但是当我单击第二个选项卡中的购物中心时，除了一个空的预览页面外，我仍然没有得到任何输出

【参考方案1】：

我根据 *** 上的类似帖子之一发现我做错了什么https://***.com/a/53190799/12181863

这是我的新代码。

async mounted() 
        var response = await fetch(global.baseUrl + "/shop/json");

        if (response.ok) 
            this.coupons = await response.json();
            console.log(JSON.stringify(this.coupons));
         else 
            console.log(response.statusText);
        

        this.shops = this.coupons.filter(
            function(p) 
                console.log(this.tappedProduct.mall);
                return p.mall == this.tappedProduct.mall;
            .bind(this)
        );
    ,