У меня есть QTable, в котором есть данные. Эти данные обновляются каждый раз, когда пользователь добавляет курс, редактирует курс или изменяет нумерацию страниц. Всякий раз, когда я редактирую курс, он прекрасно работает, но если я снова нажму на кнопку редактирования, старые данные все еще будут зарегистрированы в выбранном свойстве. Он не обновляется вместе с данными.
Редактировать код компонента:
<template>
<q-dialog v-model="opened" :bordered="true">
<q-card bordered class="q-mt-xl" style="width: 40vw;">
<q-toolbar>
<q-toolbar-title>Edit Course</q-toolbar-title>
<q-btn flat round dense icon="close" v-close-popup />
</q-toolbar>
<q-card-section class="col">
<q-input v-model="validatedata.name" stack-label label="Name" @input="getdisabled"
:rules="[
val => val.length > 0 || 'Required field'
]"/>
<q-input v-model="validatedata.code" stack-label label="Code" @input="getdisabled"
:rules="[
val => val.length > 0 || 'Required field'
]"/>
<q-input v-model.number="validatedata.creditHours" stack-label label="Credit Hours" type="number" @input="getdisabled"
:rules="[
val => val >= 0 || 'No negatives allowed'
]"/>
<q-input v-model.number="validatedata.numberOfLabs" stack-label label="Credit Hours" type="number" @input="getdisabled"
:rules="[
val => val >= 0 || 'No negatives allowed'
]"/>
<q-input v-model.number="validatedata.contactHours" stack-label label="Contact Hours" type="number" @input="getdisabled"
:rules="[
val => val >= 0 || 'No negatives allowed'
]"/>
<q-card-actions align="right">
<q-btn
color="primary"
:disable="disabled"
@click="submit"
icon="edit"
>
Update
</q-btn>
<q-btn color="red" @click="toggle" icon="cancel">
Cancel
</q-btn>
</q-card-actions>
</q-card-section>
</q-card>
</q-dialog>
</template>
<script lang="ts">
import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
import { Course, CourseModule } from '../../../store/course/index'
import { validate } from "class-validator";
@Component
export default class EditCourse extends Vue {
@Prop({ required: true })
data!: Course
private validatedata: Course = new Course ()
private disabled: boolean = true
opened = false
toggle() {
this.opened = !this.opened
if(this.opened) {
this.validatedata.copy(this.data)
this.getdisabled()
}
else {
this.validatedata.clear()
}
}
getdisabled() {
validate(this.validatedata).then(errors => {
if(errors.length) {
console.log("validation failed", errors)
this.disabled=true
} else {
console.log("validation successful")
this.disabled=false
}
})
}
submit() {
CourseModule.editCourse(this.validatedata)
this.toggle()
}
}
</script>
Основной код компонента:
<template>
<div>
<q-toolbar class="bg-grey-1 text-subtitle1 text-blue-grey-8 shadow-2 rounded-borders">
<q-breadcrumbs class="text-grey" active-color="primary">
<template v-slot:separator>
<q-icon size="24px" name="arrow_forward" color="primary" />
</template>
<q-breadcrumbs-el
label="Settings"
icon="settings"
class="hover cursor-pointer"
@click="$router.push('/system')"
/>
<q-breadcrumbs-el label="Course" class="text-primary" icon="class" />
</q-breadcrumbs>
</q-toolbar>
<q-table
class="my-sticky-virtscroll-table"
:columns="columns"
:data.sync="getData"
:pagination.sync="serverPagination"
row-key="id"
selection="single"
:selected.sync="selected"
@request="request"
>
<template slot="top">
<q-btn dense color="primary" icon="arrow_drop_down" class="q-mr-sm"></q-btn>
<q-input
v-model="filter"
placeholder="Search by Academic Program"
type="text"
class="col-3"
@keypress.enter.native="search"
/>
<q-btn
class="q-pl-sm q-pr-sm"
color="primary"
flat
@click="$refs.addCourse.toggle()"
>
<q-icon name="fas fa-plus" />
<q-tooltip
anchor="top middle"
self="bottom middle"
:offset="[10, 10]"
>
<strong>Add new Course</strong>
</q-tooltip>
</q-btn>
<q-btn
class="q-pl-sm"
color="primary"
:disable="!selected.length"
flat
@click="$refs.editCourse.toggle()"
>
<q-icon name="fas fa-pencil-alt" />
<q-tooltip
anchor="top middle"
self="bottom middle"
:offset="[10, 10]"
>
<strong>Edit Course</strong>
<br />Select record first
</q-tooltip>
</q-btn>
<div class="col" />
<q-btn
color="negative"
:disable="!selected.length"
flat
round
@click="$refs.deleteCourse.toggle()"
>
<q-icon name="fas fa-trash-alt" />
<q-tooltip
anchor="top middle"
self="bottom middle"
:offset="[10, 10]"
>
<strong>Delete Course</strong>
<br />Select record first
</q-tooltip>
</q-btn>
</template>
</q-table>
<addCourse ref="addCourse"></addCourse>
<editCourse :data="selected[0]" ref="editCourse"></editCourse>
<deleteCourse ref="deleteCourse"></deleteCourse>
</div>
</template>
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import AddCourse from './AddCourse.vue'
import EditCourse from './EditCourse.vue'
import DeleteCourse from './DeleteCourse.vue'
import { Course, CourseModule, DataTablePagination } from '../../../store/course/index'
import { transformAndValidate } from "class-transformer-validator"
import {validate, validateOrReject, Contains, IsInt, Length, IsEmail, IsFQDN, IsDate, Min, Max, IsNotEmpty} from "class-validator"
@Component({
components: {
addCourse: AddCourse,
editCourse: EditCourse,
deleteCourse: DeleteCourse
}
})
export default class ManageCourse extends Vue {
private filter: string = ''
//private selected: Course [] = []
private columns = [
{
name: 'name',
label: 'Name',
align: 'center',
required: true,
field: 'name',
sortable: true
},
{
name: 'code',
label: 'Code',
align: 'center',
required: true,
field: 'code',
sortable: true
},
{
name: 'creditHours',
label: 'Credit Hours',
align: 'center',
required: true,
field: 'creditHours'
},
{
name: 'numberOfLabs',
label: 'Number of Labs',
align: 'center',
required: true,
field: 'numberOfLabs'
},
{
name: 'contactHours',
label: 'Contact Hours',
align: 'center',
required: true,
field: 'contactHours'
}
]
get selected() {
return CourseModule.selected
}
set selected(newCourse: Course []) {
console.log(newCourse)
CourseModule.SET_SELECTED(newCourse)
}
get getData() {
return CourseModule.courses
}
get serverPagination() {
return CourseModule.pagination
}
set serverPagination(value: DataTablePagination) {
CourseModule.SET_PAGINATION(value)
}
request(args: any) {
CourseModule.SET_PAGINATION(args.pagination)
CourseModule.fetchCourses()
}
search() {
CourseModule.SET_FILTER(this.filter)
CourseModule.fetchCourses()
}
beforeMount() {
CourseModule.fetchCourses()
}
}
</script>
<style lang="scss">
.my-sticky-virtscroll-table{
height: calc(100vh - 150px);
.q-table__top,
.q-table__bottom,
thead tr:first-child th {
background-color: #fff;
}
thead tr th {
position: sticky;
z-index: 1;
}
thead tr:last-child th {
top: 48px;
}
thead tr:first-child th {
top: 0;
}
}
</style>