Hello, I'm a first-time user and beginner developer seeking some assistance. I am in the process of creating a basic web application that retrieves an HTTP JSON response from an API and displays a more visually appealing list of results. However, I've encountered an issue where only the initial few results from the response array are being rendered when using a v-for directive. Below is my main.js code snippet:
import { createApp } from 'vue';
import { createStore } from 'vuex';
import App from './App.vue'
import Axios from "axios";
const store = createStore({
state(){
return {
searchResults: null,
}
},
getters: {
},
mutations: {
setResults(state, payload){
state.searchResults = payload.claims;
},
clearResults(state){
state.searchResults = null;
}
},
actions: {
submitSearch(context, payload) {
context.commit('clearResults');
Axios.request({
baseURL: "https://factchecktools.googleapis.com/v1alpha1/claims:search",
method: "get",
params: {
languageCode: "en",
query: payload.searchTerm,
pageSize: 100,
key: "AIzaSyCqYStCPuaamvXv1qcuWeof0pEx8TguXeY",
},
})
.then((response) => {
context.commit('setResults', {claims: response.data.claims})
//this.$store.dispatch('setResults', {result: response.data.claims})
//this.searchResults = response.data.claims;
//this.$emit("search-results", this.searchResults);
})
.catch((error) => {
console.log(error);
});
},
},
})
Here is my app.vue:
<template>
<div class="container">
<ClaimSearch @search-results="setResults" />
<ResultCard
v-for="(result, index) in searchResults"
:key="index"
:claim="result.text"
:claimant="result.claimant"
:date="result.claimDate"
:reviews="result.claimReview"
/>
</div>
</template>
<script>
import ClaimSearch from "./components/ClaimSearch.vue";
import ResultCard from "./components/ResultCard.vue";
export default {
name: "App",
components: {
ClaimSearch,
ResultCard,
},
computed: {
searchResults(){
return this.$store.state.searchResults;
}
},
};
</script>
Here's my ClaimSearch.vue component:
<template>
<form @submit.prevent="submitSearch" class="searchBar">
<input type="text" v-model="searchTerm" />
<button type="submit">Is it true?</button>
</form>
</template>
<script>
export default {
data() {
return {
searchTerm: null,
};
},
computed: {},
methods: {
submitSearch(){
this.$store.dispatch('submitSearch', {searchTerm: this.searchTerm})
}
},
};
</script>
And finally, here's my ResultCard.vue component:
<template>
<div class="resultCard">
<div class="claimCard">
<h3>The Claim:</h3>
<p>{{ claim }} - {{ claimant }}, on {{ date.slice(0, 10) }}</p>
</div>
<div class="checkCard">
<h3>Fact Check:</h3>
<hr />
<div v-for="review in reviewList" :key="review.url">
<b>{{ review.publisher.name }}</b>
rated this claim as "<b>{{ review.textualRating }}</b>". <br />
Source: "<a :href="review.url" target="_blank"> {{ review.title }} </a>"
<br />
- published {{ review.reviewDate.slice(0, 10) }}. <br />
<hr />
</div>
</div>
</div>
</template>
<script>
export default {
props: ["claim", "claimant", "date", "reviews"],
data() {
return {};
},
computed: {
reviewList() {
return this.reviews;
},
},
};
</script>
When I make an API call and receive, for example, an array of 100 items, only a portion of them appear - sometimes not displaying at all. Any ideas on what might be causing this issue? Thank you for your assistance!
And yes, I am aware that I'm a total newbie in this area!