Akryum / vue-virtual-scroller

⚡️ Blazing fast scrolling for any amount of data
https://vue-virtual-scroller-demo.netlify.app
9.7k stars 915 forks source link

Use with jsx #194

Open maratfakhreev opened 5 years ago

maratfakhreev commented 5 years ago

Hi. Is it possible to use vue-virtual-scroller with jsx? Main question is how to have access to item and its attributes.

My code looks like this one and seems that I can't use v-slot inside jsx.

<RecycleScroller pageMode items={this.sortedLists.rules} itemSize="20" keyField="id">
  <AutomationListRow
    //v-slot="{rule}"
    rule={rule}
    checkedRules={this.checkedRules}
    check={this.checkRule}
    actions={this.ruleActions}
  />
</RecycleScroller>

My default list without vurtual scroller:

{this.sortedLists.rules.map(rule => (
  <AutomationListRow
    key={rule.id}
    rule={rule}
    checkedRules={this.checkedRules}
    check={this.checkRule}
    actions={this.ruleActions}
  />
))}
webistomin commented 4 years ago

Hi. Is it possible to use vue-virtual-scroller with jsx? Main question is how to have access to item and its attributes.

My code looks like this one and seems that I can't use v-slot inside jsx.

<RecycleScroller pageMode items={this.sortedLists.rules} itemSize="20" keyField="id">
  <AutomationListRow
    //v-slot="{rule}"
    rule={rule}
    checkedRules={this.checkedRules}
    check={this.checkRule}
    actions={this.ruleActions}
  />
</RecycleScroller>

My default list without vurtual scroller:

{this.sortedLists.rules.map(rule => (
  <AutomationListRow
    key={rule.id}
    rule={rule}
    checkedRules={this.checkedRules}
    check={this.checkRule}
    actions={this.ruleActions}
  />
))}

How did you solve this issue? I have the same problem.

liziwork commented 12 months ago

look here <RecycleScroller pageMode items={this.sortedLists.rules} itemSize="20" keyField="id"> {{ default: ({item}) => <AutomationListRow //v-slot="{rule}" rule={rule} checkedRules={this.checkedRules} check={this.checkRule} actions={this.ruleActions} /> }} </RecycleScroller>