My attempts to utilize the Pixabay API have been unsuccessful as I am not receiving any results. After checking with console.log, it seems that the API is not sending any data. Any assistance would be greatly appreciated. Thank you.
Below is my code utilizing Vue.js:
<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>
<div class="gallery" id="gallery">
<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>
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>