My simple page consists of a form at the top for submitting data and a list below that, as shown in the image:
https://i.sstatic.net/3WjY2.png
The list is populated with data from an api, each object having only 4 properties. Currently, there are a total of 130 elements in the list. However, when I try to input something into the textarea, it becomes extremely slow (2-10 frames per second). The more items added to the list, the slower it gets. The form at the top contains a simple data object named form with the following structure:
form: {
description: '',
expired: '',
applicationId: ''
}
An interesting aspect is that there is no shared data between the list and the form at the top, so they should function independently. When I comment out the list section, the textarea performance significantly improves.
Below is the code for rendering the list:
<b-card no-body class="box-shadowed">
<b-card-body v-if="appKeys.length === 0">
<h5>Seems there is no key available.</h5>
</b-card-body>
<b-list-group v-else flush>
<b-list-group-item
v-for="(key, index) in appKeys"
:key="key.id"
>
<div class="d-flex w-100 justify-content-between">
<p class="text-danger h6"><span class="text-dark">{{ index + 1 }} - </span> <i>{{ key.id }}</i></p>
<div>
<b-button variant="primary" title="Edit" @click="openEditModal(key.id, key.description, key.expired)">
<b-icon :icon="'pencil'"/>
</b-button>
<b-button variant="danger" title="Delete" @click="deleteKey(index, key.id)">
<b-icon :icon="'trash'"/>
</b-button>
</div>
</div>
<template v-if="key.expired">
<b-badge variant="info">Expires on: {{ key.expired | formatDate }}</b-badge>
<br/>
</template>
<small>
<b>
<i>Created by: {{ key.createdBy }}</i> on {{ key.created | formatDateTime }}
</b>
<br/>
{{ key.description }}
</small>
</b-list-group-item>
</b-list-group>
Removing
v-model="form.description"<b-form-textarea> component from bootstrap-vue, but the same slowness occurs with a basic textarea input as well.
I attempted to analyze the Vue dev-tools panel and observed dropped frames whenever there were numerous items in the list, but I am unsure what else to investigate.
Does anyone have insights into why this slowdown may be occurring? Could it potentially be a limitation of Vue.js in handling a large number of items, or is there possibly a bottleneck in my code?
Edit
I can use v-once to improve the page speed, although I require reactivity when adding new elements to update the list below.