Display variable from async function in Ionic Template

Question

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?

Thank you. I will update my question but there's nothing much to show actually. I'm using imports. It works, It just doesn't display the value correctly. — NewUser
– NewUser, Commented Feb 5, 2021 at 11:32

Takachi · Accepted Answer · 2021-02-05 12:18:47Z

1

Can you try this ? Put your setup async and await the result in your const :

async setup() {
  const emailv = await getResults()

  function getResults() {
    return Storage.get({key: "email"})
  }
}

answered Feb 5, 2021 at 12:18

Takachi

7514 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Boussadjra Brahim · Accepted Answer · 2021-02-05 11:36:07Z

0

You should call that function inside the mounted hook then just use emailv in your template :

import {ref,onMounted} from 'vue';
 import {Plugins} from "@capacitor/core";
 const {Storage}=Plugin

export default{

setup(props){
  const emailv=ref('')

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

     emailv.value=value;
   })

  return{
   emailv
  }
}
}

template :

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

answered Feb 5, 2021 at 11:36

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

9 Comments

NewUser Over a year ago

120:5 error 'onMounted' is not defined no-undef

Boussadjra Brahim Over a year ago

did you add import {ref,onMounted} from 'vue';?

NewUser Over a year ago

I just did, thank you. It console.logs the value but doesn't display anything on the template. Now it shows nothing.

Boussadjra Brahim Over a year ago

could you share the output of console.log(emailv.value); after emailv.value=value;

Boussadjra Brahim Over a year ago

what about onMounted( ()=>{ Storage.get({key: "email"}).then(res=> emailv.value=res.value;}) })?

|

Collectives™ on Stack Overflow

Display variable from async function in Ionic Template

2 Answers 2

Comments

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related