javascript - 获取表格组件的行数

Question

我正在尝试获取 vuejs 中表格组件的行数。我需要表格组件外的行数。下面的代码(显然)没有在 <h> 中显示正确的行数。标记(并使页面崩溃，因为此时数据是未知变量)。

我应该使用 $emit 吗？ ？

<h v-html="'Items (' + this.data.length + ')'"></h>

<vs-table :data="dataArray">
  <template slot="thead">
        <vs-th sort-key="itemName">Items</vs-th>
    </template>

  <template slot-scope="{data}">

    <vs-tr :data="tr" :key="indextr" v-for="(tr, indextr) in data">

      <vs-td  :data="data[indextr].itemId">
        <b>{{ data[indextr].itemName }}</b>      
      </vs-td>

    </vs-tr>

    </template>

</vs-table>
<script>
  export default {
    data() {
      return {
        dataArray: [{
          itemId: 0,
          itemName: 'some name 1'
        }, {
          itemId: 1,
          itemName: 'some name 2'
        }]
      }
    }
  }
</script>

Answer 1

您不要在 Vue 模板中使用 this。 Vue 模板中的每个变量都有一个隐式的 this。

<h v-html="'Items (' + dataArray.length + ')'"></h>

<h v-html="`Items (${dataArray.length})`"></h>

如果 dataArray 在挂载时为 null 或未定义，则使用 v-if。

<h v-if='dataArray' v-html="'Items (' + dataArray.length + ')'"></h>
<div v-else>Loading...</div>