How to update a table's data in VueJS? - vue.js

Question

I have a table with date filters (it's a panel with 4 options: day/week/month/year). My task is create pagination. After selection of the filter with specific date range, I fetch data from API and save its response to vuex store. I logged everything - fetching and vuex work fine. But when I start to change filters, my table data isn't updating properly - seems like it uses old stored data when new is added. I tried lots of ways to solve it - using a computed property, special counter, etc. How my problem can be solved? Thanks.
<template>
<div class='page'>
<h1 class='title'>Bookings</h1>
<div class='schedule-page classes bookings' :class='{ isActive: isOpenPopup }'>
<div class='filter-bar-wrapper'>
<div class='row'>
<FilterBar #change='handleFilters' :categories='allCategories' :statuses='bookingClassesStatus' />
<button class='button button--primary button--create' #click='handleCreateBooking'
v-if='caller !== callerOptions.ADMIN'>
Add a new bookings
</button>
</div>
</div>
<div class='table-wrapper'>
<p class='title'>{{ today }}</p>
<table class='bookings-table'>
<thead>
<tr>
<th>ID booking</th>
<th>Date</th>
<th>Time</th>
<th>Studio name</th>
<th>Client name</th>
<th>Class name</th>
<th>Categories</th>
<th>Points</th>
<th>Event creator</th>
<th>Status</th>
<th>Validate code</th>
</tr>
</thead>
<tbody>
<template>
<tr :key='`booking-body-title`' class='empty-row'
v-if='this.newBookingsAmount > 0'>
<td :style='"padding: 12px 16px 12px 28px; color:" + Styles.BLUE'>New bookings</td>
</tr>
<template v-for='(booking, index) in this.bookings'>
// lots of tr/td
</template>
</template>
</tbody>
</table>
<Pagination :pagesNum='this.pages' #change='handlePaging' />
</div>
</div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
import moment from 'moment'
import FilterBar from '#/components/schedule/FilterBar'
import STYLES from '#/store/styles'
import bookingStatus from '#/store/modules/bookingStatus'
import Pagination from '#/components/Pagination'
import classStatus from '#/store/modules/classStatus'
import { TAKE_ITEMS_PER_PAGE } from '#/store/modules/admin/config'
import callerOptions from '#/store/modules/admin/bookings/callerOptions'
export default {
props: {
currentStudio: {
type: Object,
},
caller: {
type: String,
required: true,
validator: (value) => {
return Object.values(callerOptions).includes(value)
},
},
},
data() {
return {
bookings: [],
newBookingsAmount: 0,
pages: 0,
callerOptions: callerOptions,
mode: '',
filters: {
startDate: moment()
.startOf('day')
.utcOffset(0, true)
.toISOString(),
endDate: moment()
.endOf('day')
.utcOffset(0, true)
.toISOString(),
},
bookingClassesStatus: bookingStatus,
bookingItem: {
date: null,
class: '',
client: '',
status: '',
numberOfPoints: null,
comment: '',
},
}
},
computed: {
...mapGetters([
'bookingsList',
]),
today() {
switch (this.mode) {
case 'day':
return moment(this.filters.startDate).format('MMMM D')
case 'week':
return `${moment(this.filters.startDate).utc().format('D.MM')} - ${moment(this.filters.endDate).utc().format('D.MM')}`
case 'month':
return moment(this.filters.startDate).format('MMMM, YYYY')
case 'year':
return moment(this.filters.startDate).format('YYYY')
default:
return 'Invalid date'
}
},
},
methods: {
moment,
...mapActions([
'getBookingsList',
'addBooking',
]),
handleFilters(filters, mode) {
this.filters = filters
this.mode = mode
this.refresh()
},
handlePaging(page) {
const rootElement = document.querySelector('.main-content')
if (rootElement) {
rootElement.scrollTo(0, 0)
}
switch (this.caller) {
case callerOptions.ADMIN:
this.getBookingsList({
...this.filters,
page: page,
take: TAKE_ITEMS_PER_PAGE,
})
break
case callerOptions.CLIENT:
this.getBookingsList({
clientId: this.clientInfo.id,
...this.filters,
page: page,
take: TAKE_ITEMS_PER_PAGE,
})
break
case callerOptions.CLASS:
this.getBookingsList({
classId: this.studioClassesInfo.id,
...this.filters,
page: page,
take: TAKE_ITEMS_PER_PAGE,
})
break
case callerOptions.STUDIO:
this.getBookingsList({
studioId: this.studiosItemInfo.id,
...this.filters,
page: page,
take: TAKE_ITEMS_PER_PAGE,
})
break
default:
break
}
this.$router.push({
name: this.$route.name,
query: { page: page, mode: this.mode },
}).catch(() => {
})
this.bookings = [...this.bookingsList.filter(item => this.isNew.includes(item.status)), ...this.bookingsList.filter(item => !this.isNew.includes(item.status))]
this.newBookingsAmount = this.bookingsList.filter(item => this.isNew.includes(item.status)).length > 0 && this.bookingsList !== undefined ? this.bookingsList.filter(item => this.isNew.includes(item.status)).length : 0
this.pages = this.bookingsPages === undefined ? 1 : this.bookingsPages
},
async refresh() {
switch (this.caller) {
case callerOptions.ADMIN:
await this.getBookingsList({
...this.filters,
page: this.$router.currentRoute.query.page,
take: TAKE_ITEMS_PER_PAGE,
})
break
case callerOptions.CLIENT:
await this.getBookingsList({
clientId: this.clientInfo.id,
...this.filters,
page: this.$router.currentRoute.query.page,
take: TAKE_ITEMS_PER_PAGE,
})
break
case callerOptions.CLASS:
await this.getBookingsList({
classId: this.studioClassesInfo.id,
...this.filters,
page: this.$router.currentRoute.query.page,
take: TAKE_ITEMS_PER_PAGE,
})
break
case callerOptions.STUDIO:
await this.getBookingsList({
studioId: this.studiosItemInfo.id,
...this.filters,
page: this.$router.currentRoute.query.page,
take: TAKE_ITEMS_PER_PAGE,
})
break
default:
break
}
await this.$router.push({
name: this.$route.name,
query: { page: 1, mode: this.mode },
}).catch(() => {
})
this.newBookingsAmount = this.bookingsList.filter(item => this.isNew.includes(item.status)).length > 0 && this.bookingsList !== undefined ? this.bookingsList.filter(item => this.isNew.includes(item.status)).length : 0
this.pages = this.bookingsPages === undefined ? 1 : this.bookingsPages
this.bookings = this.$store.state.bookings.bookingsList
},
},
async mounted() {
await this.getClientsList()
await this.getClassesList()
await this.getStudiosList()
this.mode = this.$route.query.mode === undefined ? 'day' : this.$route.query.mode
},
watch: {
filters: {
handler() {
},
deep: true,
},
bookings: {
handler() {
},
deep: true,
}
},
components: {
FilterBar,
Pagination,
},
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

Answer 1

I fixed it. My solution was to add undefined validation inside rows