Issue
(This question has been answered for JavaScript, see below, but this question is specific for TypeScript, which behaves differently)
I'm trying to use async functionality in Vue3.0 using typescript.
Without async this code works nice:
// file: components/HelloWorld.vue
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script lang="ts">
import {defineComponent} from 'vue'
export default defineComponent({
name: 'HelloWorld',
props: {
msg: String,
},
async setup() { // <-- this works without 'async'
const test = 'test'
// await doSomethingAsynchronous()
return {
test,
}
},
})
</script>
With async setup()
the component "HelloWorld" disappears from the page, and the Firefox console tells me
"Uncaught (in promise) TypeError: node is null (runtime-dom.esm-bundler.js)"
When I change async setup()
to setup()
, the code works,
but then I would not be able to use async/await inside the setup function.
So my question: how do I use async/await inside the setup() function using Typescript?
EDIT:
The answer to this question: why i got blank when use async setup() in Vue3 shows that async setup()
does work with JavaScript, so I would expect it to work in TypeScript as well.
Solution
Try to use onMounted
hook to manipulate asynchronous call :
setup() {
const users = ref([]);
onMounted(async () => {
const res = await axios.get("https://jsonplaceholder.typicode.com/users");
users.value = res.data;
console.log(res);
});
return {
users,
};
},
But the Best approach is to use async setup
in child component and wrap that component by Suspense
component in the parent one :
UserList.vue
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
async setup() {
//get users from jsonplacerholder using await fetch api
const users = await fetch("https://jsonplaceholder.typicode.com/users").then(res => res.json());
return {
users
}
}
})
</script>
<template>
<div>
<!-- list users -->
<ul>
<li v-for="user in users">{{ user.name }}</li>
</ul>
</div>
</template>
**Parent component **:
import UserList from "../components/tmp/UserList.vue"; ... <div>
<!-- Suspense component to show users -->
<Suspense>
<template #fallback>
<div>loading</div>
</template>
<UserList />
</Suspense>
</div>
Answered By - Boussadjra Brahim
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.