尝试在 Nuxt 中将数据从组件传递到页面时出现错误消息

Posted 2023-04-13

【中文标题】尝试在 Nuxt 中将数据从组件传递到页面时出现错误消息

【英文标题】：Error message when trying to pass data from component to page in Nuxt

【发布时间】：2019-10-10 08:26:13

【问题描述】：

我在 Nuxt 中创建了一个组件来从 Firestore 数据库中获取数据，并希望在我创建的页面中显示该数据。

当我将组件嵌入页面时，我不断收到错误消息：

属性或方法“provinces”未在实例上定义，但在渲染期间被引用。通过初始化该属性，确保该属性是反应性的，无论是在数据选项中，还是对于基于类的组件。

现在，当我从页面中的组件复制代码时，它工作得很好，所以我认为问题在于在组件和页面之间传递数据。

components/index.vue 中组件的完整代码：

  <template>
      <section class="container">
        <div class="index">
          <div v-for="province in provinces" :key="province.id">
        <div class="div_title">
          <h2> province.name_nl </h2>
        </div>
           </div>
        </div>
      </section>
    </template>

<script>
// import  VueperSlides, VueperSlide  from 'vueperslides'
// import 'vueperslides/dist/vueperslides.css'
import firebase from 'firebase'
// import fireDb from '@/plugins/firebase.js'
export default 
  name: 'Index',
  components: 
    //  VueperSlides,
    //  VueperSlide
  ,
  data: function() 
    return 
  ,

  async asyncData() 
    const moment = require('moment')
    const date = moment(new Date()).format('YYYY-MM-DD')
    const housesArray = []
    const provincesArray = []

    await firebase
      .firestore()
      .collection('provinces')
      .orderBy('name_nl')
      .get()
      .then(querySnapshot => 
        querySnapshot.forEach(doc => 
          provincesArray.push(doc.data())
        )
      )

    await firebase
      .firestore()
      .collection('houses')
      .where('valid_until', '>', date)
      .get()
      .then(querySnapshot => 
        querySnapshot.forEach(doc => 
          housesArray.push(doc.data())
        )
      )

    return 
      provinces: provincesArray,
      houses: housesArray
    
  

</script>

<style scoped>
div 
  text-align: center;


h2 
  margin-top: 5vh;
  margin-left: auto;
  margin-right: auto;
  width: 95vh;

h3 
  margin: 40px 0 0;

ul 
  list-style-type: none;
  padding: 0;

p 
  text-align: left;

li 
  min-width: 100% !important;
  margin-left: 0px;
  text-align: left;

</style>

我在 pages/index.vue 中插入组件的页面：

<template>
  <v-layout column justify-center align-center>
    <v-flex xs12 sm8 md6>
      <div class="text-xs-center">
        <logo />
        <tabs />
        <index />
      </div>
    </v-flex>
  </v-layout>
</template>

<script>
import Logo from '~/components/Logo.vue'
import Tabs from '~/components/Tabs.vue'
import firebase from 'firebase'
import Index from '~/components/Index.vue'

export default 
  components: 
    Logo,
    Tabs,
    Index
  ,
  data: function() 
    return 
  

    </script>

我希望页面能够显示我在将组件导入页面时检索到的数据，但我一直收到相同的错误。

我应该使用 Nuxt 存储在组件和页面之间传输数据还是我做错了什么？

【参考方案1】：

生命周期钩子asyncData 在 Vue 组件中是未知的。它仅在 Nuxt 页面中为人所知。

最好在你的页面组件中进行数据请求，并将其作为属性传递给你的组件：

pages/index.vue

<template>
   <index :houses="houses" />
</template>
<script>
const delay = time => new Promise(resolve => setTimeout(resolve, time)); 

export default 
   async asyncData() 
     // fake data
     await delay(500);

     return 
       houses: [...]
     
   

</script>

组件/index.vue

<template>
  <pre> houses </pre>
</template>
<script>
export default 
   props: 
      houses: 
        required: true,
        type: Array
      
   

</script>