<div id="app">
<div class="wrapper">
<virtual-list class="list" style="height: 360px; overflow-y: auto" data-key="key" :keeps="20" :data-sources="computedItems" :data-component="Item" />
<hr />
<!-- Create a binding between the searchString model and the text field -->
<input type="text" v-model="searchString" placeholder="lSources" />
<p>sortKey = {{ sortKey }}</p>
<li v-for="item in sortedItems" :key="item">
<input class="checkbox-align" type="checkbox" :value="item.name" id="productname" v-model="item.checked" /> {{ item.price }} - {{ item.name }}
</li>
</div>
<hr />
<div class="bbb">
<button @click="sortKey = 'name'" />name<br />
<button @click="sortKey = 'price'" />price
</div>
</div>
I have functionality like, filtering array and according to name, price filter array. Where logic is working fine. But I am not sure, how to place it inside of the vue-virtual-scroll-list and preform the same action inside.
Below is my code https://codesandbox.io/s/live-demo-virtual-list-forked-hwq38?file=/src/App.vue