How to access the value of a ref in Vue 3?

Question

I have an object that I am trying to log. When I just log the object like so, the log clearly shows that there is an object in the value property:

but when I log the value, it shows an empty object.

why is console.log(recipe.value) logging an empty object when logging just the recipe shows that there IS a value?

the recipe is from composable that makes a get request.

I made sure to console.log on the onMount.

Check out the [vuejs dev tools plugin for Chrome](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd). Also please [take the tour](https://stackoverflow.com/tour) - in general please post code as text, not screenshots. — Peter Krebs, Aug 24 '23 at 15:16
This means that you have race condition and request data isn't ready on mount. Depending on the case, this is solved with a promise or a watcher. Likely the latter because it's the way composables are usually used — Estus Flask, Aug 24 '23 at 15:22
Possible duplicate of https://stackoverflow.com/questions/23429203/weird-behavior-with-objects-console-log?noredirect=1&lq=1 — Estus Flask, Aug 24 '23 at 15:23
Please post all code, including errors as code - not images. See [this](https://meta.stackoverflow.com/questions/285551/why-should-i-not-upload-images-of-code-data-errors) for an explanation. — jQueeny, Aug 24 '23 at 20:54

score 0 · Answer 1 · edited Aug 29 '23 at 12:07

So what happened was two things:

I didn't return the ref inside an object in the composable. I did return recipe instead of return {recipe}

import $ from "jquery";
import { ref } from "vue";

const getPost = (id) => {
  const recipe = ref(null);
    
  $.get(`https://www.themealdb.com/api/json/v1/1/lookup.php?i=${id}`,
    function (data) {
    const [meals] = data.meals;
    recipe.value = meals;
    }
  );
    
  return { recipe };
};
    
export default getPost;

Instead of onMount, I did a console.log with a watcher:

watch(recipe, ()=>{
  console.log(recipe.value);
})

How to access the value of a ref in Vue 3?

1 Answers1