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：无法将未定义或null转换为对象

如果您需要https://github.com/jazuly1/nginx/blob/master/loadmorewithsearch.vue

，这是我的完整代码

Answer 1

“结果”定义为数组，但用作对象。

Answer 2

只需要简单的校正即可。

在search方法中将axios.post('/api/artist/search/', formData)更改为axios.post('/api/artist/search/' + this.$data.term)

并在paginatesearch方法中将axios.get更改为axios.post。

，并在controller页中进行了一些更正。现在一切正常。

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

2 个答案: