Vue.js和Firebase - 根据路由参数返回查询

Question

我正在处理Vue.js中的某些事情，我需要将来自vue-router的值（符号）传递给Firebase数据库查询，以检索与该查询匹配的JSON对象。我只能通过模板中的v-for / v-if hack来做到这一点。我知道必须有一种方法可以在我的脚本标签中简单地返回此查询。

我可以通过vuefire插件访问数据库。

  <template>
  <div>
    <h3>Edit Crypto</h3>
    <div v-for="crypto in getCryptos" :key="crypto[symbol]">
      <div v-if="crypto.symbol === symbol">
      {{ crypto.name }} - {{ crypto.symbol }}
      </div>
    </div>
    <div>
      {{ cryptoTest }}
    </div>
  </div>
</template>

dbCryptosRef 是数据库（图片如下）参考。 getCrypto 是我尝试用来查询数据库的方法。下面是同一文件中的脚本标记。 dbCryptosRef.equalTo（this。$ route.params.symbol）只返回firebase数据库的url，而不是JSON对象。我做错了什么？

<script>
import { mapGetters } from 'vuex'
import { dbCryptosRef } from '../firebaseConfig'

export default {
  data()
    {
      return {
        symbol: this.$route.params.symbol,
        crypto: {},
        cryptoTest: {}
      }
    },
    computed: {
      ...mapGetters ([
        'getCryptos'
      ])
    },
    methods: {
      getCrypto: function()
      {
        this.cryptoTest = dbCryptosRef.equalTo(this.$route.params.symbol)
      }
    },
    created() {
      this.getCrypto();
    }
}
</script>

Answer 1

您需要致电value以获取数据

getCrypto: function() {
 this.cryptoTest = dbCryptosRef.equalTo(this.$route.params.symbol).once('value').then(snapshot => {
  // do what you want with snapshot data
 })
}

您可以在execution leaves the block it

中阅读更多内容