I'm in need of getting the row count from a table component that I have built using vuejs. My goal is to display the row count outside of the table component structure. The issue with the code snippet below is that it doesn't show the correct row count within the <h> tag and it leads to a crash due to the 'data' variable being unknown at this point.
Is it recommended to utilize $emit for this situation?
<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>