Question

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

当我将组件嵌入页面中时，不断出现错误：

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

现在，当我从页面中的组件复制代码时，它可以正常工作，因此我认为问题在于在组件和页面之间传递数据。

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>

我在页面/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存储在组件和页面之间传输数据还是我做错了其他事情？

Answer 1

Vue组件中不知道生命周期挂钩.\pip3 install seaborn==0.9.0。仅在Nuxt页面中已知。

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

pages / index.vue

asyncData

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

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

1 个答案: