Como filtrar um array com base no valor dos props em nativescript vue?

Nov 24 2020

Peguei o nativescript vue na semana passada e, como parte de uma tarefa, estou transferindo um aplicativo da web no sails js para fazer um aplicativo móvel e visualizá-lo no nativescript. Eu tenho uma variável global global.malls que é uma matriz definida em app.js e estou criando uma exibição de lista com base nela na minha segunda guia, assim

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

e, no item tap, passo para uma segunda página que deve listar as lojas dentro deste shopping. Usando o método

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

nesta segunda página, gostaria de fazer uma lista dessas lojas, mas estou tendo dificuldade em filtrar minha matriz de lojas existentes com base neste tappedProduct.mall (que representa o nome do shopping tocado). Eu tentei usar computed e criar um hook do ciclo de vida montado () para filtrar o array existente e exibi-lo (dentro do padrão de exportação), mas nada funcionou. coupons é um array vazio que é preenchido pela minha chamada fetch para o aplicativo da web. lojas também é uma matriz vazia que eu estava experimentando para filtrar os resultados dos cupons.


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

Respostas

YHStan Nov 25 2020 at 19:47

Eu descobri o que estava fazendo de errado com base em uma das postagens semelhantes sobre stackoverflow aqui https://stackoverflow.com/a/53190799/12181863

e este é meu novo código.

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