Nuxt.js не может обновлять свойства head() из asyncData()
Я создал блог Vue.js, отображаемый на стороне сервера, используя Nuxt.js с Typescript и Ghost, но у меня возникли проблемы с обновлением метатега html с использованием данных из asyncData().
Из документации Nuxt.js я знаю, что asyncData() вызывается каждый раз перед загрузкой компонентов страницы и объединяется с данными компонента.
Я получаю эту ошибку:
Свойство title не существует для типа '{ asyncData({ app, params }: Context): Promise<{ title: string | неопределенный; выдержка: строка | неопределенный; feature_image: Обнуляемый | неопределенный; html: Обнуляемый | неопределенный; }>; голова(): любая; }'.
Это мой код:
<script lang = "ts">
import { Context } from '@nuxt/types'
import { PostOrPage } from 'tryghost__content-api'
export default {
async asyncData ({ app, params }: Context) {
const post: PostOrPage = await app.$ghost.posts.read(
{
slug: params.slug
},
{ include: 'tags' }
)
return {
title: post.title,
excerpt: post.excerpt,
feature_image: post.feature_image,
html: post.html
}
},
head () {
return {
title: this.title,
meta: [
{
hid: 'description',
name: 'description',
content: this.excerpt
}
]
}
}
}
</script>
Я уже пробовал некоторые решения, такие как использование data() для установки значения по умолчанию для каждого элемента, но ничего. Есть ли у вас предложения?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Без плагина typescript, такого как nuxt-property-decorator, у вас не будет поддержки Typescript для nuxt (в любом случае проверка типов и автозаполнение по-прежнему не будут работать).
Вот почему asyncData и fetch должны быть в параметрах компонента.
@Component({
asyncData (ctx) {
...
}
})
export default class YourClass extends Vue {
...
}
вместо
@Component
export default class YourClass extends Vue {
asyncData (ctx) {
...
}
}
Если вы все еще хотите использовать asyncData() внутри класса вашего компонента вместо установки параметра, см. этот рабочий пример с использованием модуля npm nuxt-property-decorator.
Вот рабочий код после реализации предложения @nonNumericalFloat:
import { Component, Vue } from 'nuxt-property-decorator'
import { Context } from '@nuxt/types'
import { PostOrPage } from 'tryghost__content-api'
import Title from '~/components/Title.vue'
@Component({
components: {
Title
}
})
export default class Page extends Vue {
post!: PostOrPage
async asyncData ({ app, params }: Context) {
const post: PostOrPage = await app.$ghost.posts.read(
{
slug: params.slug
},
{ include: 'tags' }
)
return {
post
}
}
head () {
return {
title: this.post.title,
meta: [
{
hid: 'description',
name: 'description',
content: this.post.excerpt
}
]
}
}
}