0
143
VisualizaçõesHow to remember input field contents for this BootstrapVue table?
I have a BootstrapVue table below;
Here is the code, thanks to this answer;
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/bootstrap-vue@2.6.1/dist/bootstrap-vue.min.js"></script>
<link href="https://unpkg.com/bootstrap-vue@2.6.1/dist/bootstrap-vue.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap@4.4.1/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>
Basically, the input form is used for filtering purposes.
How can the contents used in this input form be remembered so that if the user closes the page and opens the page next time, the past contents for this filter input form can be loaded automatically? Are cookies the most straightforward way to do it? I am open to any way to implement this memory feature.
I am using BootstrapVue, vue.js 2.6
·
Juan Pablo Isaza
2 Respostas
Responde à pergunta0
You can use window.localStorage, and bind it to your filter input.
For example:
data: () => ({
filter: localStorage.getItem('searchValue') || '',
}),
watch: {
filter() {
localStorage.setItem('searchValue', this.filter)
}
}
<b-input v-model="filter" placeholder="Filter table.."></b-input>
·
Juan Pablo Isaza
Relatório
0
For the sake of completion, I will post the complete code based on the answer from @lissy93
new Vue({
el: '#app',
data() {
return {
//save filter string into local storage
filter: localStorage.getItem('searchValue') || '',
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 },
]
}
}
watch: {
filter() {
//retrieve saved filter string from localStorage
localStorage.setItem('searchValue', this.filter)
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.6.1/dist/bootstrap-vue.min.js"></script>
<link href="https://unpkg.com/bootstrap-vue@2.6.1/dist/bootstrap-vue.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap@4.4.1/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>
·
Juan Pablo Isaza
Relatório
Responde à pergunta