Creé un blog Vue.js renderizado del lado del servidor usando Nuxt.js con Typescript y Ghost, pero tengo algunos problemas para actualizar la metaetiqueta html usando datos de asyncData() .
De la documentación de Nuxt.js, sé que se llama a asyncData() cada vez que se cargan los componentes de la página y se fusiona con los datos de los componentes.
Estoy recibiendo este error:
La propiedad 'título' no existe en el tipo '{ asyncData({ app, params }: Context): Promise<{ title: string | indefinido; extracto: cadena | indefinido; feature_image: anulable | indefinido; html: anulable | indefinido; }>; cabeza (): cualquiera; }'.
Este es mi código:
<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>Ya probé algunas soluciones, como usar data() para establecer un valor predeterminado para cada elemento, pero nada. ¿Tienes alguna sugerencia?
Sin un complemento de mecanografiado como nuxt-property-decorator , no tendrá soporte de mecanografiado para nuxt (de cualquier manera, la verificación de tipo y el autocompletado aún no funcionarán).
Es por eso que asyncData & fetch debería estar en las opciones de Componente .
@Component({ asyncData (ctx) { ... } }) export default class YourClass extends Vue { ... }en vez de
@Component export default class YourClass extends Vue { asyncData (ctx) { ... } } Si aún desea usar asyncData() dentro de su clase de componente en lugar de configurar la opción, vea este ejemplo de trabajo usando el módulo nuxt-property-decorator .
Aquí está el código de trabajo después de implementar la sugerencia de @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 } ] } } }