Skip to content

Poor performance on large lists when using templates #678

@Bartozzz

Description

@Bartozzz

My data set contains ~3000 elements, each one containing 4 properties:

[
  {
    "id": "",
    "name": "",
    "fullName": "",
    "imageUrl": ""
  }
]

When I try to customize the option slot, as follows:

<VueSelect label="name" :options="options" :onChange="">
  <template slot="option" slot-scope="option">
    {{ option.fullName}}
    <b-badge class="ml-auto" variant="primary" pill>{{ option.id }}</b-badge>
  </template>
</VueSelect>

… there's a visible delay on selecting items from the dropdown:

[Violation] 'message' handler took 278ms
[Violation] 'message' handler took 290ms
[Violation] 'message' handler took 279ms
[Violation] 'message' handler took 269ms
[Violation] 'message' handler took 267ms
[Violation] 'message' handler took 647ms

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions