एक घटक जिसमें एक छिपी हुई इनपुट फ़ील्ड है, उसमें वर्तमान पृष्ठ शीर्षक का मान होना चाहिए। Nuxt में आप अक्सर सामग्री मॉड्यूल का उपयोग करने वाले पृष्ठों को छोड़कर सभी पृष्ठों के लिए asyncData का उपयोग करके इसे पूरा कर सकते हैं। Nuxt सामग्री मॉड्यूल asyncData की अनुमति नहीं देता है लेकिन fetch की अनुमति है। उदाहरण:

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>

pages/articles/_slug.vue

<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>

इस कोड में कोई त्रुटि नहीं है लेकिन घटक केवल h1 टैग में छिपे हुए इनपुट में पृष्ठ शीर्षक कभी नहीं दिखाता है। (संपादित करें: फिक्स्ड टाइपो)

0
SaraSato 26 जिंदा 2021, 22:29
नमस्ते। क्या आपको इसका समाधान मिला?
 – 
user3681
21 मई 2021, 19:01
नमस्ते। हाँ, मुझे समझ में आ गया, मैं अब उत्तर प्रस्तुत करूँगा।
 – 
SaraSato
26 मई 2021, 21:20

1 उत्तर

सबसे बढ़िया उत्तर

मैंने इसे कैसे हल किया यह प्रोप के साथ था।

components/Form.vue

<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>

और फिर pages/_slug.vue में

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

यह आपके लिए काम करना चाहिए।

1
SaraSato 26 मई 2021, 21:27