As a novice in web development and Vue, I am currently engaged in a simple project using Vuetify with Vue.JS 3. Within one of my views, there is a table that triggers a message and fetches status to display a snackbar to the user:
methods: {
async fetchVehicles() {
await api
.get(vehiclesForTable.getAll)
.then((response) => {
this.vehicles = response.data.data;
this.snackBarMessage = response.data.message;
this.isSuccess = response.data.success;
})
.catch(() => {
this.snackBarMessage = "An unknown error occurred.";
this.isSuccess = false;
})
.finally(() => {
this.$emit("open-snackbar", this.isSuccess, this.snackBarMessage);
});
},
openDetailsDialog(id) {
this.$emit("toggle-detail", id);
},
openEditDialog(id) {
this.$emit("toggle-edit", id);
},
openAddDialog(id) {
this.$emit("toggle-add", id);
},
openDeleteDialog(id) {
this.$emit("toggle-delete", id);
},
},
It's worth noting that I'm utilizing axios to fetch my data.
However, an interesting observation is that there are no "isSuccess" or "snackBarMessage" variables declared within my Data function below:
data() {
return {
vehicles: [],
headers: [...],
searchText: "",
};
},
So how does my code function correctly? Perhaps they could be considered as local variables even though I access them using "this."
I appreciate any insight you can offer.
This isn't an issue per se, but it has left me feeling puzzled. It appears to be more about gaining knowledge than resolving a problem.