如何使用Vue从实时数据库检索信息？

Question

我从实时数据库检索信息时遇到问题。我可以通过按一个按钮（有效）来添加信息，但是数据库中的信息不会显示。

这是App.vue中的代码

<template>
  <div id="app">
    <div>
      <label> Name: </label>
      <input type="text" v-model="name"/>
      <button @click="submitObject()"> Add </button>
    </div>
    <div>
      <ul>
        <li v-for="objectname of objects" v-bind:key="objectname['.key']">{{objectname.name}}

        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { objectsref } from './firebase';
import { db } from './firebase';

export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your',
      name: '',
      objects: ''
    }
  },
  firebase: {
      objects: objectsref
  },
  methods: {
    submitObject(){
        objectsref.push({name: this.name});
    },
  }
}
</script>

还有其他人遇到这个问题吗？ 谢谢您的时间！