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

如何解决如何获取News API并在Vuetify.js卡组件中显示数据？

我想创建一个新闻网站，使用News API获取新闻信息，因此我从News API web site获得了News API密钥，但是我的代码无法正常工作。

错误消息说：

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>

解决方法

新闻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,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,}))