通过使用vue无限加载,vuetify下拉菜单获取数据

时间:2019-11-26 04:48:44

标签: vue.js vue-component vuetify.js infinite-scroll

我试图通过使用vue-infinite-loading获取我的vuetify下拉列表的数据。函数不会自动调用。 下面是我的代码

        <v-menu offset-y offset-x bottom left max-height="500" min-width="400" max-width="450">
            <template v-slot:activator="{ on }">
                <el-badge :value="unReadMessage" :hidden="hidden" class="item">
                    <v-icon color="white" v-on="on">notifications</v-icon>
                </el-badge>
            </template>
            <v-list v-for="(item, index) in notification_data" :key="index">
                <v-list-tile>
                    <v-list-tile-content>
                        <v-list-tile-title>{{item.title}}</v-list-tile-title>
                        <v-list-tile-sub-title>{{item.description}}</v-list-tile-sub-title>
                    </v-list-tile-content>
                </v-list-tile>
            </v-list>
            <infinite-loading :identifier="infiniteId" @infinite="infiniteHandler"  ref="infiniteLoading"></infinite-loading>
        </menu>

下面是用脚本编写的。我已经导入了此“从'vue-infinite-loading'导入InfiniteLoading';” 当我将无限加载器从菜单中移出时,它可以正常工作,但显示值不在列表中

    <script>
       methods: {
                infiniteHandler($state) {
                    this.loading = true;
                    this.axios.get(api, {
                        params: {
                            page: this.page,
                        },
                    })
                        .then(({data}) => {
                            if (data.next !== null) {
                                this.page += 1;
                                this.notification_data = this.notification_data.concat(data.results);
                                this.loading = false;
                                $state.loaded();
                            }
                            else {
                                this.loading = false;
                                this.notification_data = this.notification_data.concat(data.results);
                                $state.complete();
                            }
                        })
                        .catch(error => {
                            this.$notify({
                                type: 'error',
                                title: 'Error!',
                                message: error,
                            });
                        });
                },
       },
       components: {
         InfiniteLoading
       }
    </script>

0 个答案:

没有答案