Vue Js获取数组的v-for长度

Posted 2023-03-08

【中文标题】Vue Js获取数组的v-for长度

【英文标题】：Vuesjs Getting v-for length of an Array

【发布时间】：2020-10-25 07:54:50

【问题描述】：

我想在 VueJs 上渲染 totalCount

这是我的 Grapql Api

query
  allStudents
    totalCount
    edges
      node
        id
        lastName
        email
      
    
  

这里是示例 html 代码

  <div>
                <p class="card-text text-right">Total Students</p>
                <div class="fluid-container">
                  <h3 class="card-title font-weight-bold text-right mb-0" v-for="(value, totalCount) in Objects"> totalCount: value </h3>
                </div>
              </div>
            </div>

【参考方案1】：

这解决了 directory.totalCount

【参考方案2】：

在 vue 中可以通过 this.directory.totalCount 访问该属性，在 html 中可以通过 this.directory.totalCount 访问。

<div>
    <p class="card-text text-right">Total Students</p>
    <div class="fluid-container">
        <h3 class="card-title font-weight-bold text-right mb-0"
           v-for="(value, totalCount) in Objects"> 
             directory.totalCount: value
        </h3>
    </div>
</div>