0

我有一个客户端渲染的 SPA 应用程序，在 nuxt.config.js 中有以下设置：

export default {
  generate: {
    fallback: true,
  },

  target: "static",

  ssr: false
}

现在我有一个动态页面，在该页面下pages/sample/_id.vue使用 SPA 后备可以正常工作。在该页面中，我试图通过head属性设置元标记，其中包含来自子组件的数据，如下所示：

<template>
  <MyComponent ref="myComponent" :foo="foo">
</template>

<script>
import { Vue, Component } from "nuxt-property-decorator"

@Component({
  async asyncData ({ $axios }) {
    const foo = await $axios.$get("...")
    return { foo }
  },
})
export default class MyPage extends Vue {
  head () {
    return {
      title: this.$refs.myComponent.title // myComponent is guaranteed to have the `title` property
    }
  }
}
</script>

但是当我打开页面时，我得到了错误TypeError: myComponent is undefined，因为它试图在创建具有必要数据的子组件之前设置头部。我尝试通过使 head 方法异步并像这样等待来解决Vue.nextTick()此问题：

async head () {
  await Vue.nextTick()

  console.log(this.$refs.myComponent.title) // prints the correct value

  return {
    title: this.$refs.myComponent.title // doesn't set the title though
  }
}

这修复了类型错误，但即使 console.log 从子组件打印正确的值，它也不会设置标题。我怎样才能让它正确设置标题？

4

0 回答 0