Recently, while working with axios, I've encountered a puzzling issue where some attributes of objects seem to disappear. Take a look at this snippet of code:
<template>
<div>
<v-message-box :data="mBox" />
<v-data-table :headers="headers" :items="items" sort-by="calories" class="elevation-1">
<template v-slot:top>
<v-toolbar flat color="white">
<v-toolbar-title>Complaint list</v-toolbar-title>
<v-divider class="mx-4" inset vertical></v-divider>
<v-spacer></v-spacer>
<v-btn color="primary" @click="btnNewItem" dark class="mb-2">New Item</v-btn>
<v-dialog v-model="dialog" max-width="500px">
<v-card>
<v-card-title>
<span class="headline">{{ formTitle }}</span>
</v-card-title>
<v-card-text>
<v-complaint :complaint="editedItem" />
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<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.actions="{ item }">
<v-icon small class="mr-2" @click="editItem(item)">mdi-pencil</v-icon>
<v-icon small @click="deleteItem(item)">mdi-delete</v-icon>
</template>
<template v-slot:no-data>
<v-btn color="primary" @click="initialize">Reset</v-btn>
</template>
</v-data-table>
</div>
</template>
<script>
import vComplaint from "../create/v-complaint";
import Api from "@/api/Api";
import vMessageBox from "../commons/v-message-box";
import MessageBox from "../commons/messagebox.js";
import { mapGetters, mapActions } from "vuex";
export default {
name: "v-complaint-table",
data: () => ({
dialog: false,
headers: [],
items: [],
editedIndex: -1,
editedItem: {},
defaultItem: null,
mBox: new MessageBox(),
}),
props: ["patient"],
methods: {
// Some functions ....
editItem(item) {
this.editedIndex = this.items.indexOf(item);
this.editedItem = this.toObject(item);
this.dialog = true;
},
deleteItem(item) {
const index = this.items.indexOf(item);
confirm("Are you sure you want to delete this item?") &&
this.items.splice(index, 1);
},
close() {
this.dialog = false;
this.$nextTick(() => {
this.editedItem = Object.assign({}, this.defaultItem);
this.editedIndex = -1;
});
},
save() {
let mBox = this.mBox
if (this.editedIndex > -1) {
let complaint = this.editedItem;
Api()
.put("/complaint_request", {
complaint
})
.then(() => {
console.log("Updated");
})
.catch(e => {
mBox.showMessage("Error", e, "error");
console.log(e);
});
Object.assign(
this.items[this.editedIndex],
this.toTemplate(this.editedItem)
);
} else {
var complaint = this.editedItem;
var _this = this
console.log(this.editedItem)
Api()
.post("/complaint_request", {
complaint
})
.then(respone => {
_this.editedItem.id = respone.data;
console.log(_this.editedItem)
_this.items.push(this.toTemplate(_this.editedItem));
})
.catch(e => {
mBox.showMessage("Error", e, "error");
console.log(e);
});
}
this.close();
},
};
</script>
The first screenshot displays the attributes of this.editedItem:
https://i.sstatic.net/ZkxL2.png
However, in the second screenshot, we witness that some attributes like character and date are missing. These nested attributes have seemingly disappeared due to what seems to be an asynchronous issue possibly related to axios.
Here's a glimpse of the configuration for `Api.js`:
import axios from 'axios'
export default() => {
return axios.create({
baseURL: 'http://127.0.0.1:8000/api',
//baseURL: 'http://192.168.137.1:8080/api',
withCredentials: false,
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'common': '',
//'token': ''
}
})
}