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

Question

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

                <TabContentItem>
                    <ListView for="mall in malls" @itemTap="onSecondTab"
                        style="height:1250px">
                        <v-template>
                            <StackLayout orientation="vertical" height="350">
                                <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（代表已点击的商场名称）过滤我的现有商店数组。我尝试使用计算，并创建一个 mounted() 生命周期挂钩来过滤现有数组并显示它（在导出默认值内）但它的 none 有效。 coupons 是一个空数组，由我对 web 应用程序的 fetch 调用填充。 shops 也是一个空数组，我正在尝试用它来过滤优惠券的结果。


    <template>
        <Page>
            <ListView for="shop in shopsPresent" style="height:1250px">
                <v-template>
                    <StackLayout orientation="vertical" height="350">
                        <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";
                    });
                }
            },

Answer 1

我根据此处 Whosebug 上的一篇类似帖子发现我做错了什么

这是我的新代码。

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)
        );
    },

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

How to filter an array based on props value in nativescript vue?

nativescript

nativescript-vue