How to triggger reactive object on Dom in Nuxt Composition Api?

Question

I want to update my reactive form object after data was taken from Api. When I refreshed page, I can see it was changed on console.log() but it does not updated on DOM.

When Dom was mounted, i fill my form object but it is reactive object so it needs to be triggered with a right way . Normally i solved this problem by using watch but i dont know how to solve this problem without using watch and only with mounted

userInformation.vue


<template>
b {{form}} //does not triggered
</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 in here, form object will updated on DOM, but 
//i think no need to use watch because userForm gets 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 get all informations about user and it returns userForm. I prefered to use composable function . Here works well and it returns necessary informations about 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 };
}

Don't use console as a reliable way to debug. It's this problem https://stackoverflow.com/questions/17546953/cant-access-object-property-even-though-it-shows-up-in-a-console-log?rq=1 . You see userForm values that aren't there at the time when onMounted is called. — Estus Flask, Jul 30 '22 at 12:57

score 1 · Accepted Answer · answered Aug 03 '22 at 09:49

You can use ref for userForm and it will get reactive.

import { computed, onMounted, ref, useContext, watch } from '@nuxtjs/composition-api';

export function getUserInformation() {
  const { store } = useContext();

  const userInfo = computed(() => store.state['profile'].profileData);

  const userForm = ref({
    fullName: '',
    userName: '',
    aboutMe: '',
    photoUrl: '',
 
  });

  const fillForm = async data => {
    if (data) {
      userForm.value.fullName = data.fullName || '';
      userForm.value.userName = data.nick ||  '';
      userForm.value.aboutMe = data.aboutMe || '';
      userForm.value.photoUrl = data.photoURL || '';  
    }
  };

  onMounted(async () => {
    if (userInfo.value) await fillForm(userInfo.value);
  });

  watch(userInfo, async info => {
    if (info) await fillForm(info);
  });

  return { userForm };
}

How to triggger reactive object on Dom in Nuxt Composition Api?

1 Answers1