Как сохранить выведенную таблицу при нажатии на input и сохранить сам таб после перезагрузки страницы, в данный момент сохраняется введенное число в Input.
Использую LocalStorage
// дочерний навбар откуда постуает запрос на формирование таблицы
<template>
<div>
<div id="navbarMain">
<ul class="navbarul">
<li class="navbarList">
<div @click="newTab('Дислокация')">
<img src="@/assets/map.png" class="image">
</div>
<b-dropdown text="Дислокация">
<b-dropdown-item @click="newTab('Дислокация-таблица')">дислокация 1</b-dropdown-item>
</b-dropdown>
</li>
<li class="navbarList" >
<div @click="newTab('Рейсы')">
<img src="@/assets/flight.png" class="image">
</div>
<b-dropdown text="Рейсы">
<b-dropdown-item @click="newTab('Рейсы-таблица')">Рейсы 1</b-dropdown-item>
</b-dropdown>
</li>
<li class="navbarList">
<div @click="newTab('Вагоны')">
<img src="@/assets/wagon.png" class="image">
</div>
<b-dropdown text="Вагоны" >
<b-dropdown-item @click="newTab('Вагоны-таблица')">Вагоны 1</b-dropdown-item>
</b-dropdown>
</li>
<li class="navbarList" >
<div @click="newTab('Отчеты')">
<img src="@/assets/report.png" class="image">
</div>
<b-dropdown text="Отчеты">
<b-dropdown-item @click="newTab('Отчеты-таблица')">Отчеты 1</b-dropdown-item>
</b-dropdown>
</li>
</ul>
</div>
</div>
</template>
<script>
export default{
name: 'Navbar',
props: ['tabs', 'counter'],
data: function(){
return{
inner_counter: this.counter
}
},
methods:{
newTab(tabname) {
this.tabs.push({'name': tabname, 'id': this.inner_counter++ })
}
},
}
</script>
//дочерний где формируется таблица
<template>
<div>
<!-- <button @click="limits(param)">Фильтрация по числу</button> -->
<input v-model="name" @input="getName" @keyup.enter="limits(param)" type="number" placeholder="Количество">
<div id="tableMain" v-bind:value="posts">
<table border="1" id="info-table" >
<tr>
<th v-for="post in posts" :key="post.title">{{post.title}}</th>
</tr>
<tr>
<th v-for="post in posts" :key="post.id">{{post.id}}</th>
</tr>
<tr>
<td v-for="post in posts" :key="post.body">{{post.body}}</td>
</tr>
</table>
</div>
<br>
<button class="button Accept" @click="saveChange">Сохранить</button>
</div>
</template>
<script>
export default{
name: 'WagonTable',
data(){
return{
posts: [],
name: '',
}
},
methods:{
getName: function(){
this.param = this.name
},
limits: async function(let1=''){
let ans = ('https://jsonplaceholder.typicode.com/posts?' + `_limit=${let1}`)
let res = await fetch(ans)
const posts = await res.json()
this.posts = posts
} ,
saveChange() {
const parsed = JSON.stringify(this.posts)
localStorage.setItem('posts', parsed)
// localStorage.posts = this.posts
localStorage.name = this.name;
}
},
mounted() {
if (localStorage.name) {
this.name = localStorage.name;
}
if (localStorage.getItem('posts')) {
this.posts = JSON.parse(localStorage.getItem('posts'))
}
}
}
</script>
//родитель
<template>
<div>
<WagonNavbar :tabs="tabs" :counter="counter"></WagonNavbar>
<p class="infoNull" v-if="tabs.length === 0">Вы не выбрали ещё ни одной таблицы</p>
<div>
<b-card no-body class="leftTable">
<b-tabs card>
<b-tab v-for="i in tabs" :key="i.id" >
<template #title>
<span>Таблица {{i.id}}</span>
<span @click="closeTab(i.id)"> ❌</span>
</template>
<b-card-text>
{{i.name}}
<div v-if="i.name==='Рейсы'">
<FlightTable/>
</div>
<div v-if="i.name==='Вагоны'">
<WagonTable/>
</div>
</b-card-text>
</b-tab>
</b-tabs>
</b-card>
</div>
</div>
</template>
<script>
import WagonNavbar from './Navbar/WagonNavbar.vue'
import WagonTable from './Table/WagonTable.vue'
import FlightTable from './Table/FlightTable.vue'
export default{
name: 'WagonPark',
components:{WagonTable, FlightTable, WagonNavbar},
data() {
return {
tabs: [],
counter: 1,
}
},
methods:{
closeTab(x) {
for (let i = 0; i < this.tabs.length; i++) {
if (this.tabs[i].id === x) {
this.tabs.splice(i, 1)
}
}
},
}
}
</script>
