无法从 VueJS 上的 API 过滤数组答案

【问题标题】：Unable to Filter Array from API on VueJS无法从 VueJS 上的 API 过滤数组
【发布时间】：2020-04-08 07:45:21
【问题描述】：

我正在开发 Nativescript-Vue 应用程序并试图解决这个问题。

情况

我从 API 接收数据。以下是我从 api 接收到的数据结构

{
"count": 9,
"results": [
    {
        "id": 1,
        "createdOn": "2020-04-08T12:10:46.924551+05:45",
        "modifiedOn": "2020-04-08T12:10:47.236475+05:45",            
        "gender": "male",
        "age": 32,
        "status": "active",

    },
    {
        "id": 3,
        "createdOn": "2020-04-08T12:10:46.924551+05:45",
        "modifiedOn": "2020-04-08T12:10:47.236475+05:45",            
        "gender": "male",
        "age": 32,
        "status": "active",

    },
    {
        "id": 4,
        "createdOn": "2020-04-08T12:10:46.924551+05:45",
        "modifiedOn": "2020-04-08T12:10:47.236475+05:45",
        "age": 34,
        "status": "inactive",

    },
    {
        "id": 6,
        "createdOn": "2020-04-08T12:10:46.924551+05:45",
        "modifiedOn": "2020-04-08T12:10:47.236475+05:45",
        "age": 65,
       "status": "inactive",
    },
    {
        "id": 2,
        "createdOn": "2020-04-08T12:10:46.924551+05:45",
        "modifiedOn": "2020-04-08T12:10:47.236475+05:45",
        "age": 19,
        "status": "pending",

    },

]

下面是我的vue代码。

 export default {
data() {

    return{
        allData:[],
        total:[],
        active:[],
        inactive:[],
        pending:[]       

       }
},
mounted() {
   axios({ method: "GET", "url": "https://api.url" }).then(
       response =>
       {            

             this.allData = response.data.results,
             this.total = response.data.count               

         }, error => {
            console.error(error);
        }
   )       
},

computed:{
        active(){
            return this.allData.filter((status)=>{
                return this.allData.status.match("active");
                 })
            }

        },

  }

我的目标是显示应用中处于活动、非活动和待处理状态的记录数。我用这个 sn-p 来做这个活动。

<Label class="numbers" :text="active.count" width="200" height="50" />

谁能告诉我哪里失败了。

提前致谢。 Ashish A.

【问题讨论】：

试试<Label class="numbers" :text="active.length" width="200" height="50" />?

标签： javascript vue.js vuejs2 nativescript nativescript-vue

【解决方案1】：

首先更新您的计算属性，例如：

computed: {
    active() {
      return this.allData.filter(d => d.status === 'active')
    }
  },
}

同样，使用this.allData.status 不正确，因为status 是allData 数组内对象的属性。 this.allData[0].status 本来可以工作，但在 filter() 方法中不需要这样做，因为我们使用 d 变量在过滤器中获取每个对象。

然后像这样更新您的模板：

<Label class="numbers" :text="active.length" width="200" height="50" />

请注意这里active是一个数组，数组没有任何count属性，请改用length来获取活动数据的计数。

【讨论】：

【解决方案2】：

您的active 过滤器没有按照您的实际意图执行。

如果您将其更改为以下内容，它应该可以正确过滤 - 并且 active 将返回一个活动项目数组。如果你只关心他们的数量，你可以在过滤器之后链接.length，它会返回一些活动项目。

computed: {
  active() {
    return this.allData.filter((item) => item.status === "active");
  }
}

有关filter 方法的更多信息，请参阅https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

【讨论】：

感谢您清楚地解释这一点。欣赏它。