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>

Answer 2

如前所述，无需在模板语法中使用 this 来获取反应性数据（属性）的值。

使用 computed property 进行此操作的另一种方法，该方法将随时返回表数据的length。并在模板中使用它。

在脚本中：

<script>
export default {
  data() {
    return {
      dataArray: [
        {
          itemId: 0,
          itemName: "some name 1"
        },
        {
          itemId: 1,
          itemName: "some name 2"
        }
      ]
    };
  },
  computed: {
    tableLength: function() {
      return this.dataArray.length;
    }
  }
};
</script>

在模板上：

<h v-if='dataArray'>Items {{tableLength}}</h>

OR

<h v-if="dataArray" v-html="'Items ' + tableLength"></h>

获取表组件的行数

2 个答案: