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.