javascript - Vue无限无法正确加载数据
问题描述
我正在尝试使用Vue-infinite-loading获取我的数据,但它没有正确返回数据
代码
Component html
<div class="col-md-3 mb-3" v-for="product in products" :key="product.slug" :offset="1">
.. get name, image, etc.
</div>
<infinite-loading
slot="append"
@infinite="infiniteHandler"
spinner="waveDots"
@distance="1"
force-use-infinite-wrapper=".el-table__body-wrapper">
</infinite-loading>
component script
export default {
props:['currency', 'user'],
name: "home",
data() {
return {
page: 1,
showModal: false,
products: [],
currentItem: {},
}
},
methods: {
infiniteHandler($state) {
console.log('page', this.page);
axios.get('/api/products?page='+this.page)
.then(({ data }) => {
console.log('My page data', data)
if (data.data.length > 0) {
this.page += 1;
this.products.push(data.data);
$state.loaded();
} else {
$state.complete();
}
});
console.log('LOADING')
},
setCurrentItem: function(item) {
this.currentItem = item
},
}
}
截屏
知道是什么导致了这个问题吗?
更新
new Vue({
el: "#app",
props:['currency', 'user'],
name: "home",
data() {
return {
page: 1,
showModal: false,
products: [
{
name: "p1"
},
{
name: "p2"
},
{
name: "p3"
}
],
currentItem: {},
}
},
methods: {
infiniteHandler($state) {
console.log('page', this.page);
axios.get('http://www.mocky.io/v2/5e4baed83100005700d8b6fe?page='+this.page)
.then(({ data }) => {
console.log('My page data', data)
if (data.data.length > 0) {
this.page += 1;
this.products.push(data.data);
$state.loaded();
} else {
$state.complete();
}
});
console.log('LOADING')
},
setCurrentItem: function(item) {
this.currentItem = item
},
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vue-infinite-loading@2.4.4/dist/vue-infinite-loading.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
<div id="app">
<div class="col-md-3 mb-3" v-for="product in products" :key="product.slug" :offset="1">
{{product.name}}
</div>
<infinite-loading slot="append" @infinite="infiniteHandler" spinner="waveDots" @distance="1" force-use-infinite-wrapper=".el-table__body-wrapper">
</infinite-loading>
</div>
解决方案
您的代码很好,但有两个注释。首先,您应该使用https
而不是http
避免被阻止的“混合内容”并正确地从mocky.io下载数据。其次,您需要使用this.products.push(...data.data);
而不是this.products.push(data.data);
,因为在这种情况下,products
它将是一个数组数组,而不是一个对象数组(这就是您所期望的)。
<template>
<div id="app">
<div
class="col-md-3 mb-3"
v-for="product in products"
:key="product.slug"
:offset="1"
>{{product.name}}</div>
<infinite-loading
slot="append"
@infinite="infiniteHandler"
spinner="waveDots"
@distance="1"
force-use-infinite-wrapper=".el-table__body-wrapper"
></infinite-loading>
</div>
</template>
<script>
import axios from "axios";
export default {
name: "App",
data() {
return {
page: 1,
products: [],
currentItem: {}
};
},
methods: {
infiniteHandler($state) {
console.log(this.products);
console.log("page", this.page);
axios
.get(
"https://www.mocky.io/v2/5e4baed83100005700d8b6fe?page=" + this.page
)
.then(({ data }) => {
console.log("My page data", data);
if (data.data.length > 0) {
this.page += 1;
this.products.push(...data.data);
$state.loaded();
} else {
$state.complete();
}
});
console.log("LOADING");
}
}
};
</script>
<style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
推荐阅读
- angular - 在 chrome 最新版本 87 中发布视频文件流时出错
- go - 如何在 OpenGL (Go) 中正确创建数组纹理?
- unity3d - 使用 OnCollisionEnter 偶尔会应用两次强制
- flutter - 如何更新 TimePicker 标签的文本
- java - 在数组中查找数字的最佳做法是什么?
- android - 使用移动 webview 进行 Flickr 身份验证停止工作
- powershell - UTF7 中的 Powershell 输入 CSV - 某些字符的 UTF 8 输出问题
- angular - 如何“正确”检查属性名称与它的值?
- cobol - MicroFocus Native Cobol 中的 Unicode 文件名
- java - 如何避免 netBeans GUI Builder 中的小间隙