时间戳

首页 > 解决方案 > VueJS Axios API，试图只得到1个结果，不多

api - VueJS Axios API，试图只得到1个结果，不多

问题描述

我正在尝试使用 VueJS 和 Axios 从 Nasa 图像 API 获得 1 个响应。我已按照此处的教程（https://www.youtube.com/watch?v=GiIQce7Rx4Y&t=939s）进行操作，并且该应用程序的工作方式如图所示。但是本教程展示了如何通过此 API 获取可用图像的完整列表，我只想要第一张图像但不知道如何。

这是 api 组件的代码：

<template>
 <div class="search">
  <section id="sectionB">
   <h2>Type in your search term</h2>
   <form v-on:submit.prevent="getResult(query)">
    <input type="text" placeholder="Type in your search" v-model="query" />
   </form>
   <br/>
   <div v-if="results">
    <div v-for="result in results" v-bind:key="result">
     <img v-bind:src="result.links[0].href" class="imgContainer" />
    </div>
   </div>
  </section>
 </div>
</template>

<script>
 import axios from "axios";
 export default {
  name: "search",
  data() {
   return {
    msg: "Search",
    query: "",
    results: "",
     };
   },
  methods: {
   getResult(query) {
    axios.get(
      "https://images-api.nasa.gov/search?q=" + query + "&media_type=image"
    )
    .then((response) => {
      console.log(response.data.collection.items);
      this.results = response.data.collection.items;
    });
   },
  },
 };
</script>

我尝试删除 f-for 以停止循环，但这删除了所有图像，而不仅仅是第一个之后的所有人。

标签： apivue.jsaxiosv-for

解决方案

您应该参考 Nasa 网站上的 API 文档：https ://images.nasa.gov/docs/images.nasa.gov_api_docs.pdf 。他们拥有的唯一返回图像的search端点是您正在使用的端点。

但是，再次阅读您的问题..您可以只显示结果列表（数组）的第一个：results[0]，如下所示：

   <div v-if="results">
     <img v-bind:src="results[0].links[0].href" class="imgContainer" />
   </div>

推荐阅读