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

Question

I picked up nativescript vue last week and as part of an assignment, I m transferring a web application on sails js to make a mobile application and previewing it on nativescript preview. I have a global variable global.malls which is an array defined in app.js and am creating a list view based on it in my second tab like so

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

and on item tap, i move to a second page which is supposed to list the shops inside this mall. Using the method

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

on this second page, i would like to make a list of these shops but i am having difficulty filtering my array of existing shops based on this tappedProduct.mall (which represents the mall name tapped). I tried using computed, and creating a mounted() lifecycle hook to filter the existing array and displaying it (inside the export default) but none of it works. coupons is an empty array which is filled by my fetch call to the webapplication. shops is also an empty array I was experimenting with to filter the results from coupons.

    <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

I found out what i was doing wrong based on one of the similar posts on stackoverflow here https://stackoverflow.com/a/53190799/12181863

and this is my new code.

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