json - 使用 vuefire 时是否可以获取 firebase JSON 对象的长度？

Question

我有以下 firebase JSON 对象：

"items" : {
  "111111111111" : {
      "ins" : {  <<<<<<<<< I want to display the length of this
        "1523878813443" : true,
        "1523878891312" : true,
        "1523878911379" : true,
        "1523879091312" : true
      },
      "name" : "10",
      "outs" : {  <<<<<<<<< and this one too
        "1523878813443" : true,
        "1523878891312" : true,
        "1523878911379" : true
      },
      "ownerID" : "QpMHsVHHRrMvk92rbSQvcYEv4en1"
    }
}

这是我试图更新这些值的模板部分：

<tbody>
  <tr v-for="item in items" >
     <td>
        {{item.childone - door.childtwo}}
     </td>
     <td>    
        {{item.childone}} 
      </td> 
      <td>
        {{item.childtwo}}
      </td>
   </tr>
</tbody>

我让它像这样显示 JSON 对象：

“ In's”列应显示4，“Out's”应显示3，“Balance”列应显示1。这是我的组件上的 firebase 设置和数据代码：

import firebase { doorsRef } from '../firebase-config';
export default {
  firebase() { 
    return {
      items: itemsRef,
    }
  },
...etc
}

有好心人愿意帮忙吗？

Answer 1

知道 JSON 对象有键（和值），我在模板上使用了它：

{{对象.keys(JSON.对象）。长度}}

所以在我的情况下，这成功了：

<tbody>
   <tr v-for="item in items" >
      <td>
         {{Object.keys(item.childone).length - Object.keys(item.childtwo).length}}
      </td>
      <td>    
         {{Object.keys(item.childone).length}} 
      </td> 
      <td>
         {{Object.keys(item.childtwo).length}} 
      </td>
    </tr>
</tbody>

或者，您也可以计算值的数量：{{Object.values( JSON.Object ).length}}