时间戳

首页 > 解决方案 > 仅显示带有 category_name 的 API 数据：Vue 中的“WEBSITE”

vue.js - 仅显示带有 category_name 的 API 数据：Vue 中的“WEBSITE”

问题描述

我通过以下 API 从 API 获取数据：

async mounted() {
  const { data } = await axios.get('/api/talent', {
    headers: {
      'X-AUTH-TOKEN': '####', 
      'Content-Type': 'application/json'
    }
  })
  this.results = data.content
},

API是这样的：

"talent_skills": [
  {
    "category_name": "Music",
    "name": "Pop",
    "level": 5
  },
  {
    "category_name": "Instruments",
    "name": "Guitar Accoustic",
    "level": 3
  },
  {
    "category_name": "WEBSITE",
    "name": "Guitar Electric",
    "level": 5
  },
  {
    "category_name": "WEBSITE",
    "name": "Roller Blading",
    "level": 3
  }
]

我只想显示具有 category_name 的 Talent_skills ：WEBSITE

我试图过滤 axios 结果：

this.results = data.talent_skills.filter(data => data.category_name === 'WEBSITE')

但我得到了：

无法读取未定义的属性“过滤器”

学习如何过滤数据的好方法或链接是category_name什么？

- 编辑 - 

content: [{
  cache_is_website: true,
  firstname: '',
  fullname: '',
  fullname_sort: '',
  slug: '',
  talent_portfolios: [
    {
      id: 2,
      name: '',
      main: true,
      website: true,
    },
    {
      id: 3,
      name: '',
      main: false,
      website: true,
    },
  ],
  talent_skills: [
    {
      category_name: 'Music',
      name: 'Pop',
      level: 5,
    },
    {
      category_name: 'Instruments',
      name: 'Guitar Accoustic',
      level: 3,
    },

    {
      category_name: 'WEBSITE',
      name: 'Singer',
      level: 5,
    },
    {
      category_name: 'WEBSITE',
      name: 'Guitar',
      level: 1,
    },
    {
      category_name: 'WEBSITE',
      name: 'Roller blading ',
      level: 1,
    },
  ],
}]

标签： vue.jsfilteraxiosnuxt.js

解决方案

您正在使用.filter未定义的变量：“无法读取未定义的属性'过滤器'”。

问题来自您使用 Axios 响应的方式，而不是您赋予该.filter方法的功能。

正如 Axios 文档中提到的，您可以从响应中检索data属性中的响应数据：

使用 then 时，您将收到如下响应：

axios.get('/user/12345')
    .then(function (response) {
        console.log(response.data);
        console.log(response.status);
        console.log(response.statusText);
        console.log(response.headers);
        console.log(response.config);
   });

-- Axios 文档（来自 Github Axios 项目：https ://github.com/axios/axios#response-schema ）

您需要使用以下内容：

const response = await axios.get(...);
this.results = response.data;
const talent_skills = this.results.talent_skills;

// OR
const { data } = await axios.get(...);
const talent_skills = data.talent_skills;

推荐阅读