Discussion on: Understanding Reactivity in Vue 3.0

[Geoffrey Swenson]

I am totally confused by this metaphor. I have an ajax function, it alters the data, and nothing I try updates the page.

setup() {

    const cursorPosition = ref('0px');
    const cursorWidth = ref('0px');
    const cursorVisible = ref('visible');
    let menu = ref(filterMenu());

   axios.get('navigation_props')
     .then(response => {
       navigationData = response.data;
       menu = ref(filterMenu());
     })
    .catch(error => {
       console.log(error)
        // Manage errors if found any 
     });

   return {
      menu,
      cursorPosition,
      cursorWidth,
      cursorVisible
   }
},

In the axios call above, menu variable is really getting changed to the new item. But the rendering stays stuck on the default menu that was displayed until the query confirmed I could show other things.

The menu of course is a nested object. The other simpler properties do what is expected when they change, but this doesn't.

[Jinjiang]

I guess what you want to do in line 11 should be something like menu.value = filterMenu()