I am facing an issue with event orders in my application. I have a method for fetching data and another one to open a modal with that data, but the problem is that the modal is rendered before getting the data, resulting in the previous result briefly appearing. I understand that I need to call my methods within a promise, but I'm struggling to figure out how to do this.
App.vue
<v-app>
<v-main>
<h1 class="text-center text-uppercase">Gallery</h1>
<Cards
:images="images"
@addImage="updateImage($event)"
@showModal="showPopup($event)"
/>
<Card :image="image" v-if="modal" @closeImage="toggleImage($event)" />
</v-main>
</v-app>
</template>
<script>
import Cards from "./components/Cards.vue";
import Card from "./components/Card.vue";
export default {
name: "App",
components: { Cards, Card },
data: () => ({
images: {},
image: {},
modal: false,
}),
methods: {
updateImage: function (updatedImage) {
this.image = updatedImage;
},
showPopup: function (state) {
this.modal = state;
},
toggleImage: function (state) {
this.modal = state;
},
},
};
</script>
Cards.vue
<v-row>
<v-col
v-for="image in images"
:key="image.id"
class="d-flex"
cols="4"
@click="
getImage(image.id);
toggleWindow();
"
>
<v-img :src="image.url" :id="image.id">
<template v-slot:placeholder>
<v-row class="fill-height ma-0" align="center" justify="center">
<v-progress-circular
indeterminate
color="grey lighten-5"
></v-progress-circular>
</v-row>
</template>
</v-img>
</v-col>
</v-row>
</template>
<script>
export default {
name: "Cards",
props: ["images"],
methods: {
getImage(imageId) {
fetch(`https://boiling-refuge-66454.herokuapp.com/images/${imageId}`)
.then((res) => {
if (res.status == 200) {
return res.json();
} else {
throw new Error(res.status);
}
})
.then((data) => {
this.$emit("addImage", data);
});
},
toggleWindow() {
let toggle = true;
this.$emit("showModal", toggle);
},
},
};
</script>
<style></style>