Is there a way to prevent the complete re-rendering of my component, specifically a modal? Currently, when a user logs in, my web application displays a modal with some messages. When the user clicks 'next', the content inside the modal changes. However, the modal's animation pops up again, even though it's the same modal with just different content.
This behavior is typical for Vue, but I'd like to avoid the modal popping up again if only the firstPage property changes. Is there a way to refresh just the content part of the modal, without rendering the entire modal?
<template>
<div>
<b-modal v-model="modalShow">
<p v-if="firstPage"&rt;Hello</p>
<p v-else>{{content}}</p>
</b-modal>
</div>
</template>
<script>
export default {
data() {
return {
modalShow: false,
}
},
computed() {
content() {
return this.$store.state.content
},
firstPage() {
return this.$store.state.firstPage
}
}
}
</script>