My project utilizes Vue.js and Nuxt.js, and within the settings page, users can modify their personal settings. This single page allows users to navigate between tabs.
<template>
<div class="account-wrapper">
// Code content here
</div>
</template>
<script>
// Script content here
</script>
The issue arises when the page loads. In the async mounted() function, I fetch the data I need and attempt to pass it to my components. However, there is an unexpected behavior where I have to switch between tabs to display the data on the page.
For instance, in the personalSettings object, there is a field called first_name. To display this data in the personal-information component using a custom Input element, I set it up like this:
<Input
v-model="personalInfo.first_name"
:title="'First name'"
:title-class="'small'"
:additional-class="'small'"
/>
...
props: {
personalSettings: {
type: Object,
default: () => {}
}
},
data() {
return {
personalInfo: {},
loading: false,
showPopup: false
}
},
mounted() {
this.personalInfo = this.personalSettings
},
Although everything appears to be correct, I still need to switch tabs back and forth for the data to appear. What could be causing this issue? How can I resolve it to ensure that the data displays correctly?