Not working within a dialog

[Torone]

I'm using Vuetify dialogs and within I have a big list of data I wish to load with infinite scroll.
The plugin is working fine outside a dialog but it doesn't fetch in a dialog...

<v-dialog v-model="myDialog">
   <template v-slot:activator="{ on }">
      <button
        @click="openDialog()"
        v-on="on"
      >
         Open
      </button>
   </template>
   <div
      v-infinite-scroll="loadMoreItems"
      :infinite-scroll-disabled="autoLoadDisabled"
      :infinite-scroll-distance="10"
    >
      <div
        v-for="(item, i) in items"
        :key="i"
      >
         {{ item }}
      </div>
   </div>
</v-dialog>

The method loadMoreItems is not called once the dialog reach the very bottom.
Moving the HTML outside the dialog it works as expected.

Is there a trick to let it work within the dialog?

[syymo]

Me too.

[d2phap]

any update?

[wkl007]

VDialog.vue

<v-dialog v-model="myDialog">
   <template v-slot:activator="{ on }">
      <button
        @click="openDialog()"
        v-on="on"
      >
         Open
      </button>
   </template>
   <infinite-scroll/>
</v-dialog>

InfiniteScroll.vue

<div
  v-infinite-scroll="loadMoreItems"
  :infinite-scroll-disabled="autoLoadDisabled"
  :infinite-scroll-distance="10"
>
  <div
    v-for="(item, i) in items"
    :key="i"
  >
    {{ item }}
  </div>
</div>

It's work for me !!!

[dudv82]

VDialog.vue

<v-dialog v-model="myDialog">
   <template v-slot:activator="{ on }">
      <button
        @click="openDialog()"
        v-on="on"
      >
         Open
      </button>
   </template>
   <infinite-scroll/>
</v-dialog>

InfiniteScroll.vue

<div
  v-infinite-scroll="loadMoreItems"
  :infinite-scroll-disabled="autoLoadDisabled"
  :infinite-scroll-distance="10"
>
  <div
    v-for="(item, i) in items"
    :key="i"
  >
    {{ item }}
  </div>
</div>

It's work for me !!!

Thank you. I followed and the error was fixed

[yuetingsui]

VDialog.vue

< v-dialog  v-model = " myDialog " > 
   <模板 v-slot : activator = " { on } " > 
      < button 
        @ click = " openDialog () "
         v-on = " on " 
      >
         打开
      </ button > 
   < /模板> 
   <无限滚动/> 
</ v-dialog >

InfiniteScroll.vue

< div 
  v-infinite-scroll = " loadMoreItems " 
  : infinite-scroll-disabled = " autoLoadDisabled " 
  : infinite-scroll-distance = " 10 " 
> 
  < div 
    v-for = " (item, i) in items " 
    : key = " i " 
  > 
    {{ item }} 
  </ div > 
</ div >

这对我有用！！！

很好用！

[jesselpereira]

VDialog.vue

<v-dialog v-model="myDialog">
   <template v-slot:activator="{ on }">
      <button
        @click="openDialog()"
        v-on="on"
      >
         Open
      </button>
   </template>
   <infinite-scroll/>
</v-dialog>

InfiniteScroll.vue

<div
  v-infinite-scroll="loadMoreItems"
  :infinite-scroll-disabled="autoLoadDisabled"
  :infinite-scroll-distance="10"
>
  <div
    v-for="(item, i) in items"
    :key="i"
  >
    {{ item }}
  </div>
</div>

It's work for me !!!

Thank you dude, I've been trying to figure this out for weeks.

[17862974826]

这是来自QQ邮箱的假期自动回复邮件。   您好，我最近正在休假中，无法亲自回复您的邮件。我将在假期结束后，尽快给您回复。