如何获取新闻 API 并在 Vuetify.js 卡片组件中显示数据？

Question

我想做一个新闻网站，使用News API来获取新闻信息，所以我从News API web site得到了一个N​​ews API Key，但是我的代码不好用。

错误信息说：

TypeError: response.data.map is not a function

我的map 方法似乎不起作用，但我没有任何想法来解决此类问题。

我的代码如下↓

<template>
  <v-card class="mx-auto" max-width="600">
    <v-system-bar class="indigo darken-2" dark>
      <v-spacer />
      <v-icon>mdi-window-minimize</v-icon>
      <v-icon>mdi-window-maximize</v-icon>
      <v-icon>mdi-close</v-icon>
    </v-system-bar>
 
    <v-toolbar color="indigo" dark>
      <v-app-bar-nav-icon></v-app-bar-nav-icon>
      <v-tool-bar-title>Discover your news</v-tool-bar-title>
      <v-spacer />
      <v-btn icon>
        <v-icon>mdi-mgnify</v-icon>
      </v-btn>
    </v-toolbar>
 
    <v-container fluid>
      <v-row dense>
        <v-col v-for="card in cards" :key="card.title" :cols="card.flex">
          <v-card>
            <v-img :src="card.urlToImage" height="200px">
              <v-card-title v-text="card.author"></v-card-title>
            </v-img>
            <v-card-actions>
              <v-spacer />
 
              <v-btn icon>
                <v-icon>mdi-heart</v-icon>
              </v-btn>
              <v-btn icon @click="send">
                <v-icon>mdi-bookmark</v-icon>
              </v-btn>
              <v-btn icon>
                <v-icon>mdi-share-variant</v-icon>
              </v-btn>
            </v-card-actions>
          </v-card>
        </v-col>
      </v-row>
    </v-container>
  </v-card>
</template>
<script lang="ts">
import { Component, Vue } from "nuxt-property-decorator";
import axios from "axios";
 
@Component({})
export default class extends Vue {
  cards:[]=[]
    async created(){
        const response = await axios.get('https://newsapi.org/v2/everything?+ 'My API Key'');
        this.cards = response.data.map((comment: any) => ({
      title: comment.articles.title,
      author: comment.articles.author,
      urlToImage: comment.articles.urlToImage,
      flex:6
    }));}
 
  async send() {}
}
</script>

Answer 1

News API 响应（即response.data）如下所示：

{
  "status": "ok",
  "totalResults": 4239,
  "articles": [
    {
      "source": {
        "id": null,
        "name": "Boing Boing"
      },
      "author": "Boing Boing's Shop",
      "title": "Should you get a VPN or SmartDNS service? Either way, KeepSolid has you covered.",
      "description": "For years, you've heard the steady drumbeat. You need to have a VPN to protect yourself online. It's been drilled into all of us for more than a decade. But in the wake of VPN, KeepSolid, one of the world's most respected VPN providers, has jumped into the ma…",
      "url": "https://boingboing.net/2020/08/23/should-you-get-a-vpn-or-smartd.html",
      "urlToImage": "https://i2.wp.com/media.boingboing.net/wp-content/uploads/2020/08/sale_32867_article_image.jpg?fit=1200%2C800&ssl=1",
      "publishedAt": "2020-08-24T02:00:00Z",
      "content": "For years, you've heard the steady drumbeat. You need to have a VPN to protect yourself online. It's been drilled into all of us for more than a decade.\r\nBut in the wake of VPN, KeepSolid, one of the… [+4167 chars]"
    },
    {
      "source": {
        "id": null,
        "name": "Deseret News"
      },
      "author": "Art Raymond",
      "title": "Swindlers take University of Utah for nearly $500K in ransomware attack - Deseret News",
      "description": "SALT LAKE CITY — The University of Utah was stung by cybercriminals for almost $500,000 in ransom following a July attack that gave the state’s flagship institution the choice of sacrificing private student and employee data, or paying up and hoping the infor…",
      "url": "https://www.deseret.com/utah/2020/8/21/21396174/cyber-swindlers-take-university-of-utah-for-nearly-500k-in-ransomware-attack",
      "urlToImage": "https://cdn.vox-cdn.com/thumbor/kzJ07E_qBo3TGMYfL7jhxf16VU8=/0x136:2400x1393/fit-in/1200x630/cdn.vox-cdn.com/uploads/chorus_asset/file/20790900/University_of_Utah_DNSTOCK_KM_2018.jpg",
      "publishedAt": "2020-08-24T01:43:00Z",
      "content": "SALT LAKE CITY The University of Utah was stung by cybercriminals for almost $500,000 in ransom following a July attack that gave the states flagship institution the choice of sacrificing private stu… [+4553 chars]"
    }
  ]
}

而Array.prototype.map 仅适用于数组。您的代码应该在 response.data.articles 数组上使用该函数：

this.cards = response.data.articles.map(article => ({
  title: article.title,
  author: article.author,
  urlToImage: article.urlToImage,
  flex: 6,
}))