Question

嗨，我是firebase的新手，也是我的新手，并且想显示来自vue的firebase数据库中的数据包。如果我从另一个页面导航到当前页面，则可以检索数据。但是，每次我重新加载页面后，数据都会消失。

我阅读了一下，发现问题涉及状态管理？我也不完全确定。

<template>
  <div id="view-packet">
    <div v-if="packet">
      <ul class="collection with-header">
        <li class="collection-header">Packet Name : {{ packet.id }}</li>
        {{
          packet
        }}
        <li class="collection-item">Created At :{{ packet.val.createdAt }}</li>
        <li class="collection-item">
          Packet Source : {{ packet.val.sourceIp }}
        </li>
        <li class="collection-item">
          Packet Destination : {{ packet.destination }}
        </li>
        <li class="collection-item">
          Packet Protocol : {{ packet.val.protocol }}
        </li>
        <li class="collection-item">Packet length : {{ packet.val.length }}</li>
        <li class="collection-item">Packet info : {{ packet.val.info }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
import { FirebaseInit } from '../store'
// pointer to firebase databse
const db = FirebaseInit.db
const ref = db.ref('packets')
const obj = {}
ref
  .child(
    window.location.href.substring(window.location.href.lastIndexOf('/') + 1)
  )
  .on('value', function (snapshot) {
    obj.val = snapshot.val()
    obj.id = snapshot.key
  })
console.log(obj)
export default {
  name: 'view-packet',
  data () {
    return {
      packet: obj
    }
  }
}
</script>

Console.log显示：

[Vue warn]: Error in render: "TypeError: undefined is not an object (evaluating '_vm.packet.val.createdAt')"

found in

---> <ViewPacket> at src/components/ViewPacket.vue

TypeError: undefined is not an object (evaluating '_vm.packet.val.createdAt')

似乎暗示该对象是未定义的，因为它没有属性“ val”，并且没有方法createdAt？

Firebase检索的数据在页面重新加载后消失了

0 个答案: