asynchronous - Is there a way to use async functions in a Vue expression template? - Stack Overflow

admin管理员组

文章数量:1277896

Using Vue3, I'd like to do something like:

<p>Hi {{ getNameAsync() }}</p>

However this is rendering as

<p>Hi "[object Promise]"</p>

Is there a solution?

Using Vue3, I'd like to do something like:

<p>Hi {{ getNameAsync() }}</p>

However this is rendering as

<p>Hi "[object Promise]"</p>

Is there a solution?

• templates
• asynchronous
• vuejs3

Share Improve this question Follow asked Feb 24 at 2:06 Steve BennettSteve Bennett 127k4545 gold badges185185 silver badges243243 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

The result returned by async is of type Promise<>, so {{ getNameAsync() }} will display in the page [Object Promise], to display the correct content, you need to use ref to store the content and use it in the page.

NOTICE: you can't use {{ await getNameAsync() }} in the page, because Vue templates can't parse Promise directly.

<template>
  <div>
    <p>Hi {{ name }}</p>
  </div>
</template>

<script setup lang="ts">
const name = ref<string>('')

async function getNameAsync() {
  return 'John'
}

onMounted(async() => {
  name.value = await getNameAsync()
})
</script>

本文标签： asynchronousIs there a way to use async functions in a Vue expression templateStack Overflow