使用VueFire时，如何获取Firebase JSON对象中ins与outs的长度？

当然可以实现！不过要注意：Firebase实时数据库返回的ins、outs这类嵌套结构是键值对形式的普通JavaScript对象，不是数组，所以没法直接用length属性。下面给你几种简单实用的解决方案：

方法1：使用计算属性（推荐） #

在Vue组件里定义计算属性，把对象的键转换成数组后取长度，这样模板里用起来更简洁，还能自动响应数据变化：

export default {
  // 假设你已经通过VueFire绑定了items数据
  computed: {
    insLength() {
      // 用可选链和默认空对象避免数据未加载时报错
      const insObj = this.items?.['111111111111']?.ins || {};
      return Object.keys(insObj).length;
    },
    outsLength() {
      const outsObj = this.items?.['111111111111']?.outs || {};
      return Object.keys(outsObj).length;
    }
  }
}

然后在模板里直接引用：

<template>
  <div>
    <p>ins条目数量：{{ insLength }}</p>
    <p>outs条目数量：{{ outsLength }}</p>
  </div>
</template>

方法2：模板内直接计算（适合简单场景） #

如果不想写计算属性，也可以在模板里直接用Object.keys()计算，同样要处理数据未加载的情况：

<template>
  <div>
    <p>ins长度：{{ Object.keys(items?.['111111111111']?.ins || {}).length }}</p>
    <p>outs长度：{{ Object.keys(items?.['111111111111']?.outs || {}).length }}</p>
  </div>
</template>

方法3：监听数据变化手动更新 #

如果需要更精细的控制（比如数据更新时做额外处理），可以用Vue的watch监听items的变化：

export default {
  data() {
    return {
      insCount: 0,
      outsCount: 0
    }
  },
  watch: {
    items: {
      deep: true, // 深度监听嵌套对象的变化
      handler(newItems) {
        const targetItem = newItems?.['111111111111'] || {};
        this.insCount = Object.keys(targetItem.ins || {}).length;
        this.outsCount = Object.keys(targetItem.outs || {}).length;
      }
    }
  },
  // 初始化时计算一次
  created() {
    const targetItem = this.items?.['111111111111'] || {};
    this.insCount = Object.keys(targetItem.ins || {}).length;
    this.outsCount = Object.keys(targetItem.outs || {}).length;
  }
}

注意事项 #

• 一定要处理异步加载的情况：因为VueFire获取Firebase数据是异步的，初始时items可能是undefined，所以用可选链?.或者|| {}来避免报错。
• 如果你的items是一个列表（多个子项），可以把上面的逻辑改成循环处理每个子项的ins和outs长度。

内容的提问来源于stack exchange，提问作者Joao Alves Marrucho