I want to create function load more in my search result with vue js and laravel.
This is what I try. My form code to search
<form @submit.prevent="search">
<input v-model="term" type="search">
<button class="btn btn-success" type="submit">Search</button>
</form>
here is to show search result
<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>
here is my data variable
data() {
return {
term:'',
results:[],
}
},
Here is my code to showing search result.
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 this is my code to show load 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))
},
But when I click the button, it give me
TypeError: Cannot convert undefined or null to object
Here is my full code if u need it https://github.com/jazuly1/nginx/blob/master/loadmorewithsearch.vue
this.results.push(...response.data.data)
? Also, sincethis.results
is an array, you probably don't want to be adding properties likenext_page_url
as Vue will not treat them reactivelyTypeError: Cannot read property 'apply' of undefined
. im not sure, cause code above is working with index data.get
fromaxios.get
topost
, it can be load now, but it load all data, not based on what i search.