Vue 2

[nicolas-t]

Hi,

Have you planned on porting this directive to vue 2 ?
The current version doesnt work with vue 2, with vue 2 you can't use this to refer to the directive.

You can find more details here :
vuejs/vue#2873

[Leopoldthecoder]

Now vue-infinite-scroll is a part of Mint UI which will be updated to support Vue 2.0 in a couple of weeks.

[magne4000]

Any update on this ?

[Leopoldthecoder]

@magne4000 Not yet.

[nicolas-t]

@magne4000 I use a slightly modified version of
https://github.com/PeachScript/vue-infinite-loading/blob/master/src/components/InfiniteLoading.vue
destroyed becomes beforeDestroy in vue2
ready becomes mounted in vue2

I can't recall of other modifications.

[wengcd]

直接引用了 https://github.com/ElemeFE/mint-ui/blob/next/packages/infinite-scroll 该自定义指令

环境

vue 2.0

问题

不知道为何disabled 无故实效, 无论 disabled 是true还是false，是变量还是常量，会不停调用无限scroll方法

代码

  <div class="page-infinite">
    <div class="page-infinite-wrapper" ref="wrapper" :style="{ height: wrapperHeight + 'px' }">
      <ul
        class="feed-list"
        v-infinite-scroll="getFeedList({ page: nextPage })"
        infinite-scroll-disabled="disabled"
        infinite-scroll-distance="50"
      >
        <li class="page-infinite-listitem" v-for="item in feeds">
          <feed :feed="item"></feed>
        </li>
      </ul>
      <loadmore type="loading" v-if="loading" text="数据加载中"></loadmore>
      <div @click="getFeedList({ page: nextPage })">
        <loadmore type="inline" v-if="!loading && !status" text="加载失败, 点击重试"></loadmore>
      </div>
      <loadmore type="dot" v-if="!loading && status" text=""></loadmore>
    </div>
  </div>

import { mapGetters } from 'vuex';
  import Feed from 'components/Feed';
  import Loadmore from 'components/loadmore';

  export default {
    data() {
      return {
        wrapperHeight: 0,
        disabled: true
      };
    },
    components: {
      Feed,
      Loadmore
    },
    computed: {
      ...mapGetters({
        feeds: 'getFeeds',
        nextPage: 'getNextPage',
        loading: 'getLoading',
        hasMore: 'getHasMore',
        status: 'getFetchStatus',
        scrollTop: 'getFeedScroll'
      }),
      fetchDisabled() {
        // console.log(this.status);
        return this.loading || !this.hasMore || !this.status;
        // return true;
      }
    },
    methods: {
      getFeedList(options) {
        setTimeout(() => {
          this.$store.dispatch('getFeedList', options);
        }, 4500);
      }
    },
    mounted() {
      this.wrapperHeight =
        document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top;
      this.getFeedList({ page: this.nextPage });
    }
  };

[QingWei-Li]

@wengcd 请参考 demo，demo 是正常的

[bajian]

vue-infinite-scroll for vue2.0
感谢原作者！在本库基础上更新至Vue2.0，也解决了无限加载的问题，需要的可以参考下

[heygambo]

Awesome, I guess I'm going to make a German version as well :P

[e-jlion]

支持vue2 吗，我在vue2中出现this不存在的错误
vue-infinite-scroll.js:174Uncaught (in promise) TypeError: Cannot read property 'el' of undefined(…)

[Leopoldthecoder]

本周支持 Vue 2。现在需要使用的话可以安装 Mint UI，里面已经是 Vue 2 的版本。

[e-jlion]

1086 error peerinvalid The package vue@2.0.2 does not satisfy its siblings' peerDependencies requirements!
1086 error peerinvalid Peer vue-infinite-scroll@0.2.3 wants vue@^1.0.10

[Leopoldthecoder]

不要通过 npm install vue-infinite-scroll 来安装，它目前还不支持 Vue 2（这两天就会支持）。
安装 Mint UI，然后引用里面的 vue-infinite-scroll。

[e-jlion]

貌似不滚动就给一次性加载了所有的分页数据了，还没激发滚动就给自动加载下一页了

[Leopoldthecoder]

Now vue-infinite-scroll is compatible with Vue 2.0

npm install vue-infinite-scroll@2.0.0

[e-jlion]

vue-infinite-scroll 和mint-ui中的pull down 一起使用发现滚动条滚动下面来不会激发滚动的事件（v-infinite-scroll）

supper@9126.org

From: 杨奕
Date: 2016-10-26 16:40
To: ElemeFE/vue-infinite-scroll
CC: 谢华良; Comment
Subject: Re: [ElemeFE/vue-infinite-scroll] Vue 2 (#21)
Now vue-infinite-scroll is compatible with Vue 2.0
npm install vue-infinite-scroll@2.0.0
—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub, or mute the thread.

[Leopoldthecoder]

@a312586670 能重现吗？看了一下你的这个项目：http://cms.huobanj.cn/#/science ，看上去是把 vue-infinite-scroll 和 loadmore 结合使用的，没发现有问题。

[e-jlion]

已经解决了，谢谢，不过我看了下你们的源代码，我遇到一个新的问题，就是比如我应用了一个自己封装的组件比如下面
1，父组件中有

<my-component>
   <div>
     我这里是div的相关html内容
   </div>
</my-component>

2,子组件(my-component)

<template>
  <div class='test'>
    这里是子组件(my-component)
  </div>
</template>

现在这种关系我怎么才能实现父组件页面挂载后会把父组件中的中的html内容 加入到
子组件<div class='test'>中呢

[Leopoldthecoder]

@a312586670 这个问题没有涉及到 vue-infinite-scroll，请不要滥用 issue。建议查阅 Vue 文档上 slot 相关的内容：http://vuejs.org/guide/components.html#Content-Distribution-with-Slots 。

[e-jlion]

已经搞定了

[e-jlion]

谢谢!