0
141
Vistas¿Cómo recordar el contenido del campo de entrada para esta tabla BootstrapVue?
Tengo una tabla de BootstrapVue a continuación;
Aquí está el código, gracias a esta respuesta ;
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>Básicamente, el formulario de entrada se utiliza con fines de filtrado.
¿Cómo se pueden recordar los contenidos utilizados en este formulario de entrada para que, si el usuario cierra la página y la abre la próxima vez, los contenidos anteriores de este formulario de entrada de filtro se puedan cargar automáticamente? ¿Son las cookies la forma más sencilla de hacerlo? Estoy abierto a cualquier forma de implementar esta función de memoria.
Estoy usando BootstrapVue, vue.js 2.6
·
Juan Pablo Isaza
2 Respuestas
Responde la pregunta0
Puede usar window.localStorage y vincularlo a su entrada de filtro.
Por ejemplo:
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
Denunciar
0
Para completar, publicaré el código completo basado en la respuesta de @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
Denunciar
Responde la pregunta