I need limit items from hackernews API.How can I do that?
Code is:
<template>
<p>Products</p>
<div>
<div class="grid grid-cols-4 gap-5">
<div v-for="s in results" :key="story">
<ProductCard :story="s"/>
</div>
</div>
</div>
</template>
<script setup>
definePageMeta({
layout: "products"
})
const { data: stories } = await useFetch('https://hacker-news.firebaseio.com/v0/topstories.json?print=pretty')
</script>
I tried:
const { data: stories } = await useFetch('https://hacker-news.firebaseio.com/v0/topstories.json?print=pretty').limit(1000)
but no result.
according to this
there is a default limit of 500 items but there is no option to limit the items you will get, you can store the whole 500 items in an array and display the number of items you want by changing the array using map,for loop filter etc ...
Related
I am using vue in my existing codeigniter project by including via CDN.
i am having problem in using owl carousel. i fetched data using axios and populated in div using v-for method. but it seems owl carousel not working.
I have also added screenshot of what i am facing.
here is the script part
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.12/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
new Vue({
el: '#offerstab',
data () {
return {
touroffers: [],
caroffers: [],
hoteloffers: [],
cruiseoffers: [],
flightoffers: [],
}
},
methods: {
getOffers () {
axios
.get('https://www.happyvoyaging.com/api/offers/listcustom',{
params: {
category: ['tours','flight','cars','cruise','rail','hotel']
}
})
.then(res => (this.touroffers = res.data.off_tours,this.caroffers = res.data.off_cars,this.hoteloffers = res.data.off_hotels,this.cruiseoffers = res.data.off_cruises,this.flightoffers = res.data.off_flights))
},
},
mounted() {
this.getOffers();
},
})
</script>
this is my html part where i want owl carousel to be initiated.
<div id="offerstab">
<div class="owl-carousel owl-carousel-nav-dark" data-items="3" data-loop="true" data-nav="true">
<div v-for="touroffer in touroffers" class="theme-inline-slider-item">
<div class="banner _h-33vh _br-5 banner-">
<div class="banner-bg" v-bind:style="`background-image:url('${touroffer.thumbnail}');`"></div>
<div class="banner-mask banner-mask-half"></div>
<a class="banner-link" href="#"></a>
<div class="banner-caption _ta-c banner-caption-bottom">
<h5 class="banner-title _tt-uc">{{ touroffer.title }}5</h5>
<p class="banner-subtitle">Top deals from most visited cities</p>
</div>
</div>
</div>
</div>
</div>
this is how its looking, it should show 3 columns here but it is showing one below another
This is what i expect, as it works well with static code without vue
This is data in touroffers after axioscall
I'm trying to get only 1 response from the Nasa images API using VueJS and Axios. I've followed the tutorial here(https://www.youtube.com/watch?v=GiIQce7Rx4Y&t=939s) and the app is working just like shown. But this tutorial shows how to get the complete list of images available through this API, I only want the first image but can't figure out how.
Here's the code for the api component:
<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>
I tried removing f-for to stop the loop but that removed all images, not just everyone after the first.
You should refer to the documentation of the API on the website of Nasa: https://images.nasa.gov/docs/images.nasa.gov_api_docs.pdf. The only endpoint they have that returns images is the search endpoint that you are using.
However, reading your question again.. You can just show the first of the list (array) of results: results[0], like below:
<div v-if="results">
<img v-bind:src="results[0].links[0].href" class="imgContainer" />
</div>
good day; kindly need your support to finalize this issue i try to make infinite scrolle using laravel and vue.js and my proplem is get in finite loop to set request to data base and mu applocation hang up this is my code x component
<template>
<div class="container" style="margin-top:50px;">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header"><strong> Laravel Vue JS Infinite Scroll - ItSolutionStuff.com</strong></div>
<div class="card-body">
<div>
<p v-for="item in list">
<a v-bind:href="'https://itsolutionstuff.com/post/'+item.slug" target="_blank">{{item.title}}</a>
</p>
<infinite-loading #distance="1" #infinite="infiniteHandler"></infinite-loading>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
alert()
console.log('Component mounted.')
},
data() {
return {
list: [],
page: 1,
};
},
methods: {
infiniteHandler($state) {
let vm = this;
this.$http.get('/Services?page='+this.page)
.then(response => {
return response.json();
}).then(data => {
$.each(data.data, function(key, value) {
vm.list.push(value);
});
$state.loaded();
});
this.page = this.page + 1;
},
},
}
</script>
this is my route
Route::get('/Services', 'ServicesController#Services');
Problem 1
You are binding to the distance property wrong.
Solution
Instead of <infinite-loading #distance="1" #infinite="infiniteHandler"></infinite-loading>
it should be
<infinite-loading :distance="1" #infinite="infiniteHandler"></infinite-loading>
Problem 2
In the code, this.page is being incremented before $http.get is resolved.
This may result in unintentional side effects.
Solution
As per the example in docs vue-infinite-loading hacker news example you should be incrementing the page after data is loaded.
I want to show the immediate child after clicking on its parent. Its easy on jquery, hard on vue, how can I do it?
template:
<boxes inline-template>
<div class="white-box" #click="toggleTick">Purchase only
<div v-if="showTick"><i class="fas fa-check"></i></div>
</div>
</boxes>
js
Vue.component('boxes', {
data: function () {
return {
showTick: false
}
},
methods: {
toggleTick () {
this.showTick = !this.showTick
}
}
})
var app = new Vue({
el: '#app',
data: {
}
})
At the moment I have multiple "white-box" div, it shows the child div for all of them, I just want to show the div for the clicked parent's child.
You should have behavior that you expect :
Vue.component('boxes', {
data: function () {
return {
showTick: false
}
}
})
var app = new Vue({
el: '#app'
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<boxes inline-template>
<div class="white-box" #click="showTick = !showTick">
<span>
Purchase only
</span>
<div v-if="showTick">Component 1</div>
</div>
</boxes>
<boxes inline-template>
<div class="white-box" #click="showTick = !showTick">
<span>
Purchase only
</span>
<div v-if="showTick">Component 2</div>
</div>
</boxes>
</div>
Your white-boxes are sharing the same showTick variable, so clicking on one fo them changes the value for all of them.
There are 2 available solutions to this:
Have multiple boxes components and not multiple white-boxes under the same boxes component. Something take ends up looking like this in the DOM
<boxes>...</boxes>
<boxes>...</boxes>
<boxes>...</boxes>
Use an array for showTick and use an index when calling toggleClick. Also note that for the changes in the array to be reactive you need to use Vue.set.
I recommend the former solution.
Axios setting response data in Vue component variable but variable not displaying data on the browser. We can see data on console but when I display, Browser shows me nothing. Data are in JSON Format.
Snapshot:
Output:
<template>
<div class="card">
<div class="card-header">Subject</div>
<div class="card-body" >
<!-- <ul class="list-group">
<li class="list-group-item" :key = "message.id" v-for = "message in messages"> {{ message.subject}}</li>
</ul> -->
{{messages}}
</div>
</div>
</template>
<script>
export default{
name: 'subject-component',
data () {
return {
messages:{}
}
},
mounted () {
},
created(){
axios.get('http://127.0.0.1:8000/subject/get')
.then(response => {this.messages = response.data})
.catch((error) => console.log(error));
}
}
</script>
By setting up the project again, this issue has been resolved. And again I used the same approach for axios request like.
axios.get('http://127.0.0.1:8000/get/subjects')
.then((response)=>(this.subjects = response.data))
.catch(function(error){console.log(error)});
Thank you all for your effort.