我想使用 vue js 和 laravel 在搜索结果中创建函数加载更多。

这是我尝试的。 我的表单代码用于搜索

<form @submit.prevent="search">
    <input v-model="term" type="search">
    <button class="btn btn-success" type="submit">Search</button>
</form>

这里显示搜索结果

<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>

这是我的数据变量

data() {
return {
    term:'',
    results:[],
 }
},

这是我的代码来显示搜索结果。

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;
        });
    },

这是我的代码来显示加载更多数据

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))
},

但是当我单击按钮时，它给了我

TypeError: Cannot convert undefined or null to object

如果您需要，这是我的完整代码 https://github.com/jazuly1/nginx/blob/master/loadmorewithsearch.vue