मूल निवासी वाउ में प्रॉप वैल्यू के आधार पर एरे को कैसे फ़िल्टर करें?

Question

मैंने पिछले सप्ताह नेटिवस्क्रिप्ट वाउ को उठाया और असाइनमेंट के हिस्से के रूप में, मैं मोबाइल एप्लिकेशन बनाने और इसे नेटिवस्क्रिप्ट पूर्वावलोकन पर पूर्वावलोकन करने के लिए पाल पर एक वेब एप्लिकेशन को स्थानांतरित कर रहा हूं। मेरे पास एक वैश्विक वैरिएबल ग्लोबलमॉल है, जो ऐप में परिभाषित एक सरणी है। मैं और मेरे मोबाइल टैब में इसके आधार पर एक सूची दृश्य बना रहा हूं

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

इस दूसरे पृष्ठ पर, मैं इन दुकानों की एक सूची बनाना चाहता हूं, लेकिन मुझे इस टैपडप्रोड.मल्ल (जो मॉल के नाम का प्रतिनिधित्व करता है) के आधार पर मौजूदा दुकानों की मेरी सरणी को फ़िल्टर करने में कठिनाई हो रही है। मैंने गणना का उपयोग करने की कोशिश की, और मौजूदा सरणी को फ़िल्टर करने और इसे प्रदर्शित करने के लिए एक माउंटेड () जीवनचक्र हुक का निर्माण (निर्यात डिफ़ॉल्ट के अंदर) किया, लेकिन इसमें से कोई भी काम नहीं करता। कूपन एक खाली सरणी है जो मेरे भ्रूण कॉल द्वारा वेबप्लिकेशन में भरी जाती है। दुकानें भी एक खाली सरणी है जिसका उपयोग मैं कूपन से परिणामों को फ़िल्टर करने के लिए कर रहा था।

    <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

मुझे पता चला कि मैं यहां स्टैकओवरफ्लो पर एक समान पोस्ट के आधार पर क्या गलत कर रहा था https://stackoverflow.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)
        );
    },