nativescript vue에서 props 값을 기반으로 배열을 필터링하는 방법은 무엇입니까?

Question

지난주에 nativescript vue를 선택했고 과제의 일부로 sails js에서 웹 응용 프로그램을 전송하여 모바일 응용 프로그램을 만들고 nativescript 미리보기에서 미리보고 있습니다. app.js에 정의 된 배열 인 전역 변수 global.malls가 있으며 두 번째 탭에서이를 기반으로 목록보기를 만들고 있습니다.

                <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 (탭한 쇼핑몰 이름을 나타냄)을 기반으로 기존 상점 배열을 필터링하는 데 어려움이 있습니다. 나는 계산을 사용하고, 기존 배열을 필터링하고 (내보내기 기본값 내부에) 표시하기 위해 mount () 수명주기 후크를 만들려고 시도했지만 아무것도 작동하지 않습니다. 쿠폰은 웹 응용 프로그램에 대한 가져 오기 호출로 채워지는 빈 배열입니다. 상점은 또한 쿠폰의 결과를 필터링하기 위해 실험했던 빈 배열입니다.

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