时间戳

首页 > 解决方案 > pixabay api 不提供任何结果

javascript - pixabay api 不提供任何结果

问题描述

所以我尝试使用来自 pixabay 网站的 api 但是我没有任何结果，api 没有发送任何结果我使用 console.log 检查了它我想从你们那里得到一点帮助谢谢

这是使用 vuejs 的代码，所以我尝试使用来自 pixabay 网站的 api，但是我没有任何结果，api 没有发送任何结果我使用 console.log 检查了它我想从你们那里得到一点帮助谢谢

这是使用 vuejs 的代码

 <template>
    <section>
    <div class="row">
    
    <form class="form-inline d-flex justify-content-center md-form form-sm mt-0">
      <i class="fas fa-search" aria-hidden="true"></i>
      <input class="form-control form-control-sm ml-3 w-75" type="text" placeholder="Search"
        aria-label="Search" v-model="searchText" v-on:keyup.enter.stop.prevent="search">
    </form>
    
    </div>
    <!-- Grid row -->
    
    <!-- Grid row -->
    <div class="gallery" id="gallery">
    
      <!-- Grid column -->
      <div class="mb-3 pics" v-for="image in images" :key="image.id"  >
        <img class="img-fluid" :src="image.largeImageURL"  alt="">
      </div>
     
    
    </div>
    </section>
    </template>
    <script>
    // @ is an alias to /src
    import HelloWorld from "@/components/HelloWorld.vue";
    import axios from 'axios'
    export default {
      name: "Home",
      components: {
        HelloWorld,
      },
        data () {
        return {
          searchText: '',
        amount: 15,
        apiUrl: 'https://pixabay.com/api/',
        apiKey: '19405941-132a0646104b54c8459f0746c',
        images: []
        }
      },
      mounted () {
       
      },
      methods:{
        search:function(event){
    
     axios
          .get( `${this.apiUrl}?key=${this.apiKey}&q=${this.searchText}`)
          .then(response => (this.images = response.data.hits))
    console.log(this.images)
         
        }
        
      }
    };
    </script>
    >

标签： javascriptvue.js

解决方案

按回车键正在提交您的表单。修饰符在输入上，prevent但应该在<form>：

<form @submit.prevent>

它可以从您的按键事件侦听器中删除：

v-on:keyup.enter="search"

推荐阅读