I am eager to utilize Vue in order to display a table with rows, while having the cells as a component.
I have created a functional example showcasing the desired end result along with some code outlining my approach:
HTML
<div id="app">
<table>
<thead>
<tr>
<th>Row</th>
<th>ID</th>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, rindex) in people">
<td>{{ rindex }}</td>
<cell v-for="(value, vindex, rindex) in row" :value="value" :vindex="vindex" :rindex="rindex"></cell>
</tr>
</tbody>
</table>
<template id="template-cell">
<td>{{ value }}</td>
</template>
</div>
JS
// Register the component
Vue.component('cell', {
template: '#template-cell',
name: 'row-value',
props: ['value', 'vindex', 'rindex']
// Here I intend to access value, vindex, and rindex
});
// Initialize the application
new Vue({
el: '#app',
data: {
people: [
{id: 3, name: 'Bob', age: 27},
{id: 4, name: 'Frank', age: 32},
{id: 5, name: 'Joe', age: 38}
]
}
});
My rationale for this approach is based on the Vue documentation on v-for which illustrates the following example:
And another for the index:
<div v-for="(value, key, index) in object">
{{ index }}. {{ key }} : {{ value }}
</div>
Therefore, I anticipate being able to retrieve the row's index in the cell component effortlessly. However, this has not been the case as it results in numerous errors indicating that the values are undefined.
If anyone could offer guidance on this matter, it would be greatly appreciated as I am at a loss on how to tackle this issue. I am keen to understand how to implement this correctly.
(Note: My reason for wanting to render the cells within the component is to observe value changes, refer to this answer to another question I posed here if you're interested)