如何在nativescript-vue中根据props值过滤数组

Question

上周我学习了nativescript-vue，作为一项任务的一部分，我将在sails js上转移一个web应用程序来制作一个移动应用程序，并在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
}
});
}

在第二个页面上，我想列出这些商店的列表，但我很难根据这个tapedProduct.mall(代表点击的商城名称(过滤我现有的商店阵列。我尝试使用computed，并创建一个mounted((生命周期挂钩来过滤现有数组并显示它(在导出默认值内(，但都不起作用。coupons是一个空数组，由我对web应用程序的fetch调用填充。商店也是一个空数组，我正在试验从优惠券中过滤结果。

<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

我根据stackoverflow上的一篇类似帖子发现自己做错了什么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)
);
},