我在下面有一個 BootstrapVue 表；
這是代碼，感謝這個答案；
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/[email protected]/dist/bootstrap-vue.min.js"></script>
<link href="https://unpkg.com/[email protected]/dist/bootstrap-vue.css" rel="stylesheet" />
<link href="https://unpkg.com/[email protected]/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>
基本上，輸入表單用于過濾目的。
如何記住這個輸入表單中使用的內容，以便在用戶關閉頁面并在下次打開頁面時自動加載這個過濾輸入表單的過去內容？cookie 是最直接的方法嗎？我愿意以任何方式實作此記憶體功能。
我正在使用 BootstrapVue，vue.js 2.6
uj5u.com熱心網友回復：
您可以使用window.localStorage，并將其系結到您的過濾器輸入。
例如：
data: () => ({
filter: localStorage.getItem('searchValue') || '',
}),
watch: {
filter() {
localStorage.setItem('searchValue', this.filter)
}
}
<b-input v-model="filter" placeholder="Filter table.."></b-input>
uj5u.com熱心網友回復：
為了完整起見，我將根據@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/[email protected]/dist/bootstrap-vue.min.js"></script>
<link href="https://unpkg.com/[email protected]/dist/bootstrap-vue.css" rel="stylesheet" />
<link href="https://unpkg.com/[email protected]/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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/463754.html
標籤：javascript Vue.js 饼干 引导程序
下一篇：無法點擊元素-反應