Я пытаюсь реализовать поисковый фильтр, который отображает данные со стороны сервера, а также сортирует и разбивает на страницы.
В нем было модальное поле для добавления редактирования.
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: vm => ({
rangeDates: ['', ''],
date: new Date().toISOString().substr(0, 10),
dateFormatted: vm.formatDate(new Date().toISOString().substr(0, 10)),
txt:'',
menu1: false,
dialog: false,
headers: [
{
text: 'ID',
align: 'left',
sortable: false,
value: 'id',
},
{ text: 'description', value: 'description' },
{ text: 'Mail Id', value: 'mail_id' },
{ text: 'Reply Date', value: 'replyDate' },
{ text: 'Status', value: 'name' },
{ text: 'Actions', value: 'action', sortable: false },
],
desserts: [],
options: {},
totalDesserts: 0,
loading:false,
editedIndex: -1,
editedItem: {
mail_id: '',
replyDate: vm.formatDate(new Date().toISOString().substr(0, 10)),
status: 'Select',
description: '',
},
defaultItem: {
mail_id: '',
replyDate: vm.formatDate(new Date().toISOString().substr(0, 10)),
status: 'Select',
description: '',
},
}),
computed: {
formTitle () {
return this.editedIndex === -1 ? 'New Item' : 'Edit Item'
}
},
watch: {
date (val) {
this.dateFormatted = this.formatDate(this.date)
this.editedItem.replyDate=this.formatDate(this.date)
},
desserts(val){
this.desserts=val
console.log('desse',val);
},
options: {
handler () {console.log("handerrler");
this.getDataFromApi()
.then(data => {console.log("handeler");
console.log(data);
this.desserts = data.items
this.totalDesserts = data.total
})
},
deep: true,
},
dialog (val) {
val || this.close()
},
} ,
mounted () {
this.getDataFromApi()
.then(data => {
console.log(this.options);
console.log("mounted");
console.log(data);
this.desserts = data.items
this.totalDesserts = data.total
})
},
created () {
this.initialize()
},
methods: {
formatDate (date) {
if (!date) return null
const [year, month, day] = date.split('-')
return `${month}/${day}/${year}`
}, parseDate (date) {
if (!date) return null
console.log(date);
const [month, day, year] = date.split('/')
return `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`
},
initialize () {
this.getDataFromApi();
},
editItem (item) {
this.editedIndex = this.desserts.indexOf(item)
this.editedItem = Object.assign({}, item)
this.editedItem.replyDate=this.formatDate(this.editedItem.replyDate)
this.dialog = true
},
deleteItem (item) {
const index = this.desserts.indexOf(item)
confirm('Are you sure you want to delete this item?') && this.desserts.splice(index, 1)
},
close () {
this.dialog = false
setTimeout(() => {
this.editedItem = Object.assign({}, this.defaultItem)
this.editedIndex = -1
}, 300)
},
save () {
axios({
method: 'POST',
url: "<?php echo site_url('mail_manage/get_reply_list')?>",
data: {data:this.editedItem },
config: { headers: {'Content-Type': 'multipart/form-data' }}
})
.then(function (response) {
if (this.editedIndex > -1) {
this.editedItem.replyDate=this.parseDate(this.editedItem.replyDate)
this.defaultItem.replyDate=this.parseDate(this.defaultItem.replyDate)
Object.assign(this.desserts[this.editedIndex], this.editedItem)
} else {
this.desserts.push(this.editedItem)
}
this.close()
})
.catch(function (response) {
//handle error
console.log(response);
this.loading=false;
});
},
getDataFromApi () {
var date = this.rangeDates;
console.log(date);
return new Promise((resolve, reject) => {
const dataOpts=this.options;
axios({
method: 'POST',
url: "<?php echo site_url('mail_manage/get_reply_list')?>",
data: {data:{date},options:this.options},
config: { headers: {'Content-Type': 'multipart/form-data' }}
})
.then(function (response) {
console.log(response);
let items = response.data.data
const total = response.data.recordsTotal
console.log("===_____===");
console.log(items,total,dataOpts);
console.log("======");
console.log(this.options);
this.desserts = items
this.totalDesserts = total
console.log(this.desserts,this.totalDesserts);
this.loading = false
resolve({
items,
total,
})
this.options=dataOpts;
this.$forceUpdate();
})
.catch(function (response) {
//handle error
console.log(response);
this.loading=false;
});
//this.loading = true
})
}
}
})
<v-data-table
:headers="headers"
:items="desserts"
:options.sync="options"
:server-items-length="totalDesserts"
:loading="loading"
sort-by="id"
class="elevation-1"
>
<template v-slot:top>
<v-toolbar flat color="white">
<v-toolbar-title>Replies</v-toolbar-title>
<v-divider
class="mx-4"
inset
vertical
></v-divider>
<div class="flex-grow-1"></div>
<v-dialog v-model="dialog" max-width="500px">
<template v-slot:activator="{ on }">
<v-btn color="primary" dark class="mb-2" v-on="on">ADD REPLY</v-btn>
</template>
<v-card>
<v-card-title>
<span class="headline">{{ formTitle }}</span>
</v-card-title>
<v-card-text>
<v-container>
<v-row>
<v-col cols="12" sm="6" md="4">
<v-menu
ref="menu1"
v-model="menu1"
:close-on-content-click="false"
transition="scale-transition"
offset-y
full-width
max-width="290px"
min-width="290px"
>
<template v-slot:activator="{ on }">
<v-text-field
v-model="editedItem.replyDate"
label="Date"
hint="MM/DD/YYYY format"
persistent-hint
prepend-icon="event"
@blur="date = parseDate(editedItem.replyDate)"
v-on="on"
></v-text-field>
</template>
<v-date-picker v-model="date" no-title @input="menu1 = false"></v-date-picker>
</v-menu>
</v-col>
<v-col cols="12" sm="6" md="4">
<v-text-field v-model="editedItem.status" label="Status"></v-text-field>
</v-col>
<v-col cols="12" sm="6" md="4">
<v-text-field v-model="editedItem.description" label="Descriprion"></v-text-field>
</v-col>
</v-row>
</v-container>
</v-card-text>
<v-card-actions>
<div class="flex-grow-1"></div>
<v-btn color="blue darken-1" text @click="close">Cancel</v-btn>
<v-btn color="blue darken-1" text @click="save">Save</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-toolbar>
</template>
<template v-slot:item.action="{ item }">
<v-icon
small
class="mr-2"
@click="editItem(item)"
>
edit
</v-icon>
<v-icon
small
@click="deleteItem(item)"
>
delete
</v-icon>
</template>
<template v-slot:no-data>
<v-btn color="primary" @click="initialize">Reset</v-btn>
</template>
</v-data-table>
Это было взято из примера сервера vuetify LINK . Все отлично работает, кроме фильтра диапазона дат. Ответ данных также правильный. Данные устанавливаются только в том случае, если функции сортировки и разбивки на страницы, которые можно датировать, работают, когда я пытаюсь нажать один и тот же getDataFromApi() при щелчке фильтра, никаких изменений не происходит и таблица не обновляется. Я попытался изменить массив dessets тогда тоже бесполезно. Options не запускается и отслеживание десертов также не запускается.
, который запускается при обновлении сортировки или нумерации страниц.