javascript - 如何使用 vue js 和 laravel 在搜索结果中创建更多负载

Question

我想用 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：无法将 undefined 或 null 转换为对象

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

标签： javascriptlaravelvue.jsvuejs2vue-component

Answer 1

'results' 被定义为一个数组，但被用作一个对象。