Почему в Nuxt.js ssr не видит переменную?
есть страница города
<template>
<div class="app-page">
<div class="content-header">
<h1>Редактирование</h1>
</div>
<div class="content-body">
<div class="row">
<div class="col-xl-9">
<div class="form-group">
<input type="text" class="form-control" placeholder="Заголовок" />
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Заголовок" />
</div>
</div>
</div>
<button class="btn btn-default" @click.prevent="save">Сохранить</button>
</div>
</div>
</template>
<script lang="ts">
import {
defineComponent,
onMounted,
reactive,
ref,
ssrRef
useContext,
} from '@nuxtjs/composition-api'
import { useFindById } from '~/composition/database/findById'
export default defineComponent({
setup() {
const form = reactive({
name: '',
slug: '',
})
const { params } = useContext()
const url = ref(`/v1/admin/country/${params.value.countryId}`)
const { result } = useFindById(url.value)
onMounted(() => {
form.name = result.value.name
form.slug = result.value.slug
})
return { result, form }
},
})
</script>
файл useFindById
import { useContext, ref, useFetch } from "@nuxtjs/composition-api"
export function useFindById(url) {
const result = ref(null)
const query = ref(null)
const { $axios } = useContext()
useFetch(async () => {
try {
query.value = await $axios.$get(url)
result.value = query.value.data
} catch (error) {
console.log(error)
}
})
return { result }
}
у меня NuxtJs SSR
при переходе на страницу города выдает
не хнаю, как правильно присвоить значения
Cannot read property 'name' of null
An error occurred while rendering the page. Check developer tools console for details.
ERROR in pages/settings/countries/_countryId.vue:46:19
TS2531: Object is possibly 'null'.
44 | onMounted(() => {
45 | form.name = result.value.name
> 46 | form.slug = result.value.slug
| ^^^^^^^^^^^^
47 | })
48 |
49 | return { result, form }