Below is a BootstrapVue table I'm working with;
The code, courtesy of this response, is showcased below;
new Vue({
el: '#app',
data() {
return {
filter: '',
items: [
{ id: 1, first_name: "Mikkel", last_name: "Hansen", age: 54 },
{ id: 2, first_name: "Kasper", last_name: "Hvidt", age: 42 },
{ id: 3, first_name: "Lasse", last_name: "Boesen", age: 39 },
{ id: 4, first_name: "Kasper", last_name: "Hansen", age: 62 },
{ id: 5, first_name: "Mads", last_name: "Mikkelsen", age: 31 },
]
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f99b96968d8a8d8b9889d48f8c9cb9cbd7cfd7c8">[email protected]</a>/dist/bootstrap-vue.min.js"></script>
<link href="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fb9994948f888f899a8bd68d8e9ebbc9d5cdd5ca">[email protected]</a>/dist/bootstrap-vue.css" rel="stylesheet" />
<link href="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d7b5b8b8a3a4a3a5b6a797e3f9e3f9e6">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />
<div id="app" class="p-5">
<b-input v-model="filter" placeholder="Filter table.."></b-input>
<hr />
<b-table :items="items" :fields="fields" :filter="filter">
</b-table>
</div>
The input form serves the purpose of filtering.
Is there a way to retain the contents entered in this input form, so that if the user revisits the page, the previous filter inputs can be preloaded automatically? Would using cookies be the simplest approach for implementing this memory feature? Open to any suggestions on how to achieve this functionality.
BootstrapVue and vue.js version 2.6 are being used.