<script setup> 構文 では await で非同期関数を待つことはできません。 以下のようにして非同期関数を待つようにします
元のコード(エラーで動作しない)
<template>
<div>
<h1>MySetupComponent</h1>
<div>{{ result }}</div>
</div>
</template>
<script lang="ts" setup>
// 非同期関数
const getMessageAsync = async () => {
await new Promise((resolve) => setTimeout(resolve, 1000))
return '1秒たちました!!!'
}
// result に取得した値をセットする
const result = ref('')
const message = await getMessageAsync() // ### エラーで動作しない
result.value = message
</script>
<script lang="ts" setup>
import { ref } from 'vue'
// 非同期関数
const getMessageAsync = async () => {
await new Promise((resolve) => setTimeout(resolve, 1000))
return '1秒たちました!!!'
}
// result に取得した値をセットする
const result = ref('')
const getResultAsync = async () => {
const message = await getMessageAsync()
result.value = message
}
getResultAsync()
</script>
<script lang="ts" setup>
import { ref } from 'vue'
// 非同期関数
const getMessageAsync = async () => {
await new Promise((resolve) => setTimeout(resolve, 1000))
return '1秒たちました!!!'
}
// result に取得した値をセットする
const result = ref('')
// 即時関数
;(async function () {
const message = await getMessageAsync()
result.value = message
})()
</script>
<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue'
// 非同期関数
const getMessageAsync = async () => {
await new Promise((resolve) => setTimeout(resolve, 1000))
return '1秒たちました!!!'
}
export default defineComponent({
setup() {
// result に取得した値をセットする
const result = ref('')
onMounted(async () => {
const message = await getMessageAsync()
result.value = message
})
return {
result
}
}
})
</script>