Vue.js 如何将组件与Nuxt内容模块中的数据一起使用

具有隐藏输入字段的组件应具有当前页面标题的值。在Nuxt中，除使用Nuxt内容模块的页面外，您可以对所有页面使用asyncData来完成此操作。Nuxt内容模块不允许异步数据，但允许获取。例如：

components/Form.vue

<template>
<div>
  <input
    id="page"
    type="hidden"
    :value="article.title"
    required
  />
</div>
</template>

<script>
export default {
  async fetch() {
    this.article = await this.$content('articles', this.params).fetch()
  },
  data() {
    return { article: {} }
  },
}
</script>

<template>
<div>
  <h1>{{ article.title }}</h1>
  <Form />
</div>
</template>

<script>
export default {
  async asyncData({ $content, params }) {
    const article = await $content('articles', params.slug).fetch()
    return { article }
  },
}
</script>

<template>
    <form>
        <label for="title"> Title </label>
        <input name="title" type="hidden" :value="title" required />
        <button type="submit">Send</button>
    </form>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      required: false,
      default: ''
    },
  }
}
</script>

<template>
  <div>
    <nuxt-content :document="doc" />
    <Form :title="doc.title" />
  </div>
</template>

---

这段代码没有错误，但是组件从不在隐藏输入中显示页面标题，只在h1标记中显示。（编辑：修正打字错误）

我是如何用道具解决这个问题的

components/Form.vue

<template>
<div>
  <input
    id="page"
    type="hidden"
    :value="article.title"
    required
  />
</div>
</template>

<script>
export default {
  async fetch() {
    this.article = await this.$content('articles', this.params).fetch()
  },
  data() {
    return { article: {} }
  },
}
</script>

<template>
<div>
  <h1>{{ article.title }}</h1>
  <Form />
</div>
</template>

<script>
export default {
  async asyncData({ $content, params }) {
    const article = await $content('articles', params.slug).fetch()
    return { article }
  },
}
</script>

<template>
    <form>
        <label for="title"> Title </label>
        <input name="title" type="hidden" :value="title" required />
        <button type="submit">Send</button>
    </form>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      required: false,
      default: ''
    },
  }
}
</script>

<template>
  <div>
    <nuxt-content :document="doc" />
    <Form :title="doc.title" />
  </div>
</template>

---

这应该适合您。

您好。你找到解决办法了吗？嗨。是的，我想好了，我现在就提交答案。