使用Vue 3和带有Setup语法(TypeScript)的合成API,我想在一个组件内声明一个引用,详细说明用户的信息。
const userData: Ref<User | undefined> = ref({} as User)
如果我使用这个语法,当我想访问if时,我必须一直在userData后面放一个“?”,因为数据也可能是未定义的。
<template>
<div class="pa-4 pt-1">
<HeaderPage :title="`Administrateurs - ${userData?.email}`" />
aaaa {{ userData }}
</div>
</template>
<script setup lang="ts">
import HeaderPage from '@/components/pages/Header.vue'
import { onMounted, ref } from 'vue'
import UserService from '@/api/modules/user'
import { useRoute } from 'vue-router'
import type { Ref } from 'vue'
import type { User } from '@/api/types/user.interfaces'
const route = useRoute()
const loading = ref(false)
const userData: Ref<User | null> = ref({} as User)
onMounted(() => {
fetchUserData()
})
function fetchUserData() {
UserService.getUser(route.params.userId as string).then((res) => {
userData.value = res
loading.value = false
})
}
</script>
EDIT尝试了以下操作:
const userData: Ref<User> = ref()
但我得到了
3条答案
按热度按时间8i9zcol21#
你可以这样设置。
但是,仍然在模板中使用
<div v-if="userData" ...>
rggaifut2#
在脚本中尝试此操作
和模板中
因此,现在userData在开始时未定义,因此不会显示任何内容,但在获取和设置它时,它不会未定义,因此将满足条件v-if ='userData',并显示数据,因此模板中不需要可选链接(userData?.email),因为现在 typescript 将知道用户将始终出现在div标记中,这要归功于v-if=“userData”条件
iqxoj9l93#
允许未定义userData
仅在定义数据时呈现组件