почему у меня пусто при использовании async setup () в Vue3

Проблема

Я использую async setup () в Vue3, но мой html исчез мой шаблон компонента не вставляется в html, но когда я удаляю префикс async и await, мой html возвращается ， у кого-то была такая же проблема, как эта

  async setup () {
   const data = ref(null)
   try {
    const res = await fetch('api')
    data.value = res.json()
   } catch (e) {
    console.error(e)
   }
  return {
   data
  }
}

Я пробовал

  1. Я проверяю выборку, она возвращает правильный ответ
  2. Я пробовал тег <Suspense>, проблема все та же

vue.js vuejs3 vue-component vue-composition-api
person g6165310    schedule 22.09.2020    source источник

Ответы (2)


arrow_upward
15
arrow_downward

async setup() вашего компонента выглядит нормально, за исключением отсутствующего await res.json(), что все равно не вызовет проблемы, которую вы видите. Я подозреваю, что вы используете <Suspense> неправильно.

Чтобы использовать async setup() в компоненте, родительский компонент должен использовать этот компонент в теге <Suspense>:

<!-- Parent.vue -->
<template>
 <Suspense>
   <MyAsyncComponent />
 </Suspense>
</template>

Вы также можете использовать слоты default и fallback в <Suspense>, чтобы показать индикатор загрузки, ожидая разрешения настройки дочернего компонента:

<!-- Parent.vue -->
<template>
 <Suspense>
   <template #default>
     <MyAsyncComponent />
   </template>
   <template #fallback>
     <span>Loading...</span>
   </template>
 </Suspense>
</template>

Проверено [email protected], Node 14, Chrome 84, macOS Catalina. Обратите внимание, что <Suspense> все еще экспериментальный, и API может быть изменен.

демо < / а>

person tony19    schedule 24.09.2020

arrow_upward
0
arrow_downward

  • parent.vue
<template>
 <!-- parent add <suspense> -->
 <suspense>
   <child />
 </suspense>
</template>

<script>
import Child from './child.vue'

export default {
  components: {
    child
  },
  setup() {
    return {}
  }
}
</script>
  • child.vue
<template>
  <div>child</div>
</template>

<script>
export default {
  async setup() {
    return {}
  }
}
</script>

когда child.vue используйте async setup..., parent.vue нужно добавить <suspense> к child.vue

person Sinosaurus    schedule 17.07.2021