Vue 不会为特定 API 请求呈现数据

Question

所以我有下一个组成部分：

<template>
  <div class="home">
    <div class="container"  v-if="data" >
      <Card v-for="result in data" :img="result.links[0]" :key="result.href"/>
    </div>
  </div>
</template>

<script>
 import Card from "../components/Card";
 import axios from "axios";
 export default {
   name: 'Home',
   components: {Card},
   data() {
     return {
       data: null,
     }
   },

   created() {
      axios.get('https://images-api.nasa.gov/search?q=mars').then(res => {
         return res.data.collection.items
      }).then(res => {
         this.data = res;
      })
    }
 }

我在渲染 Card 组件时遇到问题，因为我无法传递“img”属性，控制台显示“无法读取未定义的属性（读取‘0’）”错误，这很奇怪，因为我可以看到我的“数据” “属性已经从 API 获得了正确的数据，但是当我尝试使用不同的查询参数（如“https://images-api.nasa] 从相同的 API 获取数据时。gov/search?q=jupiter" 一切正常。所以我不知道这可能是 Vue 内部问题还是 API 问题？

Answer 1

您可以稍微修改一下代码以确保 result.links 不是未定义的

<Card v-for="result in data" :img="getImageLink(result)" :key="result.href"/>

现在在你的方法中，

        getImageLink(result) {
            if (result.links) {
                return result.links[0];
            }

            return null;
        }

这将解决您的问题

Vue 不会为特定 API 请求呈现数据

Vue won't render data for specific API request

javascript

vue.js

vue-component

vuejs2