如何在 VueJS 中更新表的数据？
Posted
技术标签:
【中文标题】如何在 VueJS 中更新表的数据？【英文标题】：How to update a table's data in VueJS? 【发布时间】：2021-12-27 22:52:28 【问题描述】：我有一张带有日期过滤器的表格（这是一个有 4 个选项的面板：日/周/月/年）。我的任务是创建分页。选择具有特定日期范围的过滤器后，我从 API 获取数据并将其响应保存到 vuex 存储。我记录了所有内容 - 获取和 vuex 工作正常。但是当我开始更改过滤器时，我的表数据没有正确更新 - 添加新数据时它似乎使用旧存储数据。我尝试了很多方法来解决它 - 使用计算属性、特殊计数器等。我的问题如何解决？谢谢。
<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>【问题讨论】：
【参考方案1】：我修好了。我的解决方案是在行内添加未定义的验证
【讨论】：
以上是关于如何在 VueJS 中更新表的数据？的主要内容，如果未能解决你的问题，请参考以下文章
如何在VueJS中使用v-on:change并发送参数以使用axios获取更新JSON数据