How to use with Vuejs 2 template

[stoneC0der]

Hi, can anyone point me into the right direction, like sample code, examples

I recently learned (or still learning vuejs) but I have not started using the composition API of Vuejs 3 so I am still using the old template syntax and I have trouble implemented this plugin

I have already refactored a plugin that use composition API by default to use Vue2 template syntax but can seem to get this one working:

What I facing is as follow:

• The firstLoad function is not triggered so I have to manually call the handleLoading function in the created or mounted hook
• Bu doing so, I got $state.loaded() is not a function

A quick answer will be appreciated from anyone as it feature that I need to implement before i can move on with the project. Thanks

[oumoussa98]

Hi @stoneC0der, If you are using vue 3 typically should work as you'd expect even with options API I don't know what might cause that problem, if you can provide more info and code example would help solve the issue. Here is a simple working example using options API, Hope it helps.

[stoneC0der]

hi @oumoussa98, thanks a lot your example helped me a lot I had a couples mistake on my end but was too frustrated to actually see it, first of, I registered the component globally as 'infinite-loading' but use 'InfiniteLoading' in my template but couldn't see because I was more focus on the target prop, anyway I got it working by using your example as template in my code

But I did face another issue with the target prop

This is how I edited your example to use the :target prop, works fine

...
<template>
  <div class="v-loading" style="height: 350px; overflow: auto;">
    <div class="result" v-for="comment in comments" :key="comment.id">
    <div>{{ comment.email }}</div>
    <div>{{ comment.id }}</div>
  </div>
  </div>
  <InfiniteLoading :comments="comments" @infinite="load" :target="`.v-loading`"/>
</template>
....

But this does not work

...
    <div class="v-loading">
      <div class="result" v-for="comment in comments" :key="comment.id">
        <div>{{ comment.email }}</div>
        <div>{{ comment.id }}</div>
      </div>
    </div>
    <infinite-loading
      :comments="comments"
      @infinite="getComments"
      :target="`.v-loading`"
    ></infinite-loading>
  </app-layout>
...

By moving the infinite-loading component inside the target div, it works

...
    <div class="v-loading">
      <div class="result" v-for="comment in comments" :key="comment.id">
        <div>{{ comment.email }}</div>
        <div>{{ comment.id }}</div>
      </div>
      <!-- moved here -->
    <infinite-loading
      :comments="comments"
      @infinite="getComments"
      :target="`.v-loading`"
    ></infinite-loading>
    </div>
  </app-layout>
...

Thanks a lot