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

Question

我正在尝试使用 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 以停止循环，但这删除了所有图像，而不仅仅是第一张之后的所有人。

Answer 1

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

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

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

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

VueJS Axios API, trying to get only 1 result, not many

api

vue.js

axios

v-for