VueJS Axios API，尝试仅获取1个结果，数量不多

编程问答 2022-06-03

问题描述

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

解决方法

您应参考Nasa网站上的API文档：https://images.nasa.gov/docs/images.nasa.gov_api_docs.pdf。他们唯一返回图像的端点是您正在使用的def read_article(file_name): sentences = [] file = open(file_name,'r') f_data = file.readlines() f_data = [x for x in f_data if x != '\n'] # it should remove any break present f_data = [x.replace('\n',' ') for x in f_data] #this would remove that end of line f_data = ''.join(f_data) article = f_data.split('. ') for sentence in article: sentences.append(sentence.replace("^[a-zA-Z0-9!@#$&()-`+,/\"]"," ").split(" ")) return sentences 端点。

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

results[0]
apiapiaxiosaxiosaxiosv-forvue.js