After fetching data from the API, I noticed that my reactive form object was not updating on the DOM even though it changed in the console.log() when I refreshed the page.
When the DOM is mounted, I populate my form object, but because it's a reactive object, it needs to be triggered in the right way. Usually, I would use watch to solve this issue, but I'm trying to find a solution without using watch and only relying on the mounted lifecycle hook.
userInformation.vue
<template>
b {{form}} //does not trigger
</template>
<script>
import { getUserInformation } from '@/utils/userInformation';
export default {
setup(){
const { store, $axios, i18n } = useContext();
const { userForm } = getUserInformation();
const form = reactive({
fullName: '',
userName: '',
aboutMe: '',
photoUrl: '',
});
onMounted(() => {
if (userForm)
{
console.log('userForm',userForm) //data comes and for updated
fillForm(userInfo.value); }
});
//if I use watch here, the form object will update on the DOM, but
//I believe there's no need to use watch since userForm gets the necessary values in onMounted
const fillForm = async data => {
if (data) {
form.fullName = data.fullName || '';
form.userName = data.nick || '';
form.aboutMe = data.aboutMe || '';
form.photoUrl = data.photoURL || '';
}
};
return {form}
}
}
userInformation.js file
In this file, I gather all information about the user and return userForm. I chose to use a composable function here, which works well and provides the necessary information about the user.
import { computed, onMounted, reactive, useContext, watch } from '@nuxtjs/composition-api';
export function getUserInformation() {
const { store } = useContext();
const userInfo = computed(() => store.state['profile'].profileData);
const userForm = reactive({
fullName: '',
userName: '',
aboutMe: '',
photoUrl: '',
});
const fillForm = async data => {
if (data) {
userForm.fullName = data.fullName || '';
userForm.userName = data.nick || '';
userForm.aboutMe = data.aboutMe || '';
userForm.photoUrl = data.photoURL || '';
}
};
onMounted(async () => {
if (userInfo.value) await fillForm(userInfo.value);
});
watch(userInfo, async info => {
if (info) await fillForm(info);
});
return { userForm };
}