I am looking to implement a load more function in my search results using Vue.js and Laravel.
Here is the approach I have taken:
<form @submit.prevent="search">
<input v-model="term" type="search">
<button class="btn btn-success" type="submit">Search</button>
</form>
This section displays the search results:
<tr v-for="(result, index) in results.data">
<td>{{ result.artist_name }}</td>
<td>{{ result.gender }}</td>
<td>{{ result.created_at }}</td>
<td>{{ result.updated_at }}</td>
</tr>
<div v-if="results.next_page_url" class="card-footer">
<button @click.prevent="paginatesearch(results.next_page_url)" type="button">Load More</button>
</div>
Below is how I'm handling the data variable:
data() {
return {
term:'',
results:[],
}
},
This snippet shows how the search results are displayed:
search() {
let formData = new FormData();
formData.append('term', this.term);
axios.post('/api/artist/search/', formData)
.then((response) => {
this.SearchDiv = true;
this.IndexDiv = false;
this.results = response.data;
this.noResults = this.results.length === 0;
});
},
And here is the code for loading more data:
paginatesearch(url = '') {
this.loading = true;
this.disabled = 1;
axios.get(url ? url : '/api/artist/search/')
.then(response => {
this.loading = false;
this.disabled = 0;
if (! this.results.data) {
this.results = response.data
}
else {
this.results.data.push(...response.data.data)
this.results.next_page_url = response.data.next_page_url
}
})
.catch(e => console.error(e))
},
However, when I click the button, I encounter the following error:
TypeError: Cannot convert undefined or null to object
If you need to reference the full code, it can be found at https://github.com/jazuly1/nginx/blob/master/loadmorewithsearch.vue