Display variable from async function in Ionic Template

I’m trying to display a result from an async method in the Vue/Ionic Template. I successfully retrieve the value from the local storage and output it using console.log

 setup() {

 import {Plugins} from "@capacitor/core";
 const {Storage}=Plugins;

 const getEmail= async()=>{
          const emailv=await Storage.get({key: "email"});
          console.log(emailv.value);
          return emailv.value;
    };


 }

I also tried this

 setup() {

  import {Plugins} from "@capacitor/core";
  const {Storage}=Plugins;

   const emailv= async()=>{
          const {value}=await Storage.get({key: "email"});
          console.log(value);
          return value;
    };
}

And that’s how I call it on my template:

<ion-note>{{emailv()}}</ion-note>

The problem is that, although it’s being successfully displayed on the console, it doesn’t seem to work on the template. It just shows me "[object Promise]" . I have tried looking for some solutions and, from what I understood (please correct me if I’m wrong as I’m not sure how async-await works.), once I retrieve the variable, I should be able to use it everywhere.

So my question is:

Is there any way for me to “get” this variable and display it in the template? I dont get any error, “Property “emailv” was accessed during render but is not defined on instance.”

I think it would be better to use a ref for this instead. In your setup method in your Vue component, you can declare the ref:

import { ref } from 'vue';

...

setup() {
  const email = ref('');

  ...

  const getEmail = async () => {
    const { value } = await Storage.get({ key: "email" });
    email.value = value;
  }

  getEmail();

  return { email }
}

And then render it in the template by doing {{ email }}.

1 Like

Thank you but still doesn’t work. It seems like a problem with async functions.

Update:

Actually I’m able to output everything in the console. I would like to find a way to print these values on templates/tags. They don’t seem to work. It either gives me empty results, or “[object Promise]” or App.vue?3dfd:10 Uncaught (in promise) TypeError: Cannot read property 'email' of undefined. It seems like the app can’t, shomehow, see the variable/const.

Can you provide a GitHub repo that shows this issue happening?

1 Like

Read me: https://github.com/tguimmaraess/test-ionic

Master (actual files): https://github.com/tguimmaraess/test-ionic/tree/master

I created a new project to try to reproduce the issue.

I used a const to store the email and password.

Please, could you see what I am doing wrong? I’m very much appreciated.

UPDATE

I actually tried your solution again and it worked partially. I displays the email on the template but I get this error:

Type 'string | null' is not assignable to type 'string'. Type 'null' is not assignable to type 'string'.

It seems like the value const is empty but it has the email.

UPDATE 2

I managed to get it working by doing this:

  import { ref } from 'vue';
   . . .
  const email=ref("");

 . . .

  const getItem=async()=>{
      const {value}=await Storage.get({ key: 'email' });
      //succesfully displays "test@gmail.com" on the console.
      console.log('Got item: ', value);
      email.value=JSON.stringify(value);
  }

  getItem();

return {getItem}



and in the Template:

{{JSON.parse(email)}}

But worked only the first time I accessed the page after login. If I try to access the page again it doesn’t show anything and gives me an error:

Uncaught (in promise) SyntaxError: Unexpected end of JSON input

If i remove {{JSON.parse(email)}} and leave just {{email}} it works but shows the email with “”.

you were close, i made a few changes and provide a link to additional resources

App.vue

    const email = ref<any>(""); // OR const email = ref<string|null>("");


    onMounted(async () => {
      const { value } = await Storage.get({ key: "email" });
      email.value = value;
      console.log(email.value);
    });

update template
<ion-note>{{ email }}</ion-note>

I have a bunch of ionic vuejs content here , most with source code

2 Likes

Thank you, Aaron. I watch your videos by the way. I would like to thank you for your helpful tutorials.