I would like to use Vue to render a table with rows but have the cells as a ponent.
I have made a working example of what I would like to see as the end result and have some code relating to how I think that I could go about this:
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 ponent
Vueponent('cell', {
template: '#template-cell',
name: 'row-value',
props: ['value', 'vindex', 'rindex']
// In here I would like to access value, vindex and rindex
});
// Start 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}
]
}
});
This is because, in the Vue documentation on v-for they show the example:
And another for the index:
<div v-for="(value, key, index) in object">
{{ index }}. {{ key }} : {{ value }}
</div>
So logically thinking, I should be able to get the rows index in the cell ponent without too much issue but this is not so as it es up with a bunch of errors indicating that the values are undefined.
If anyone could point me in the right direction here then I would be greatly appreciate it as I'm out of ideas with this problem but would really like to understand how to implement this correctly.
(Note: the reason for me wanting to render the cells in the ponent is to register the change of values, see the answer to another question that I asked here if you're interested)
I would like to use Vue to render a table with rows but have the cells as a ponent.
I have made a working example of what I would like to see as the end result and have some code relating to how I think that I could go about this:
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 ponent
Vue.ponent('cell', {
template: '#template-cell',
name: 'row-value',
props: ['value', 'vindex', 'rindex']
// In here I would like to access value, vindex and rindex
});
// Start 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}
]
}
});
This is because, in the Vue documentation on v-for they show the example:
And another for the index:
<div v-for="(value, key, index) in object">
{{ index }}. {{ key }} : {{ value }}
</div>
So logically thinking, I should be able to get the rows index in the cell ponent without too much issue but this is not so as it es up with a bunch of errors indicating that the values are undefined.
If anyone could point me in the right direction here then I would be greatly appreciate it as I'm out of ideas with this problem but would really like to understand how to implement this correctly.
(Note: the reason for me wanting to render the cells in the ponent is to register the change of values, see the answer to another question that I asked here if you're interested)
Share Improve this question edited Jul 13, 2022 at 22:55 tony19 138k23 gold badges277 silver badges347 bronze badges asked Dec 14, 2016 at 22:33 Craig van TonderCraig van Tonder 7,68718 gold badges65 silver badges111 bronze badges 02 Answers
Reset to default 9You just need to enclose your cell ponent inside an template element, this is because table in HTML expects only td inside tr, when it sees cell, it will not render it(see similar problem with Angular here). However template can be used here as a content fragment and after vue piles, it will add tr in place of cell in the HTML.
<tr v-for="(row, rindex) in people">
<td>{{ rindex }}</td>
<template>
<cell v-for="(value, vindex) in row" :value="value" :vindex="vindex" :rindex="rindex" ></cell>
</template>
</tr>
see working pen here.
I am not sure if you can replace index with rindex in the v-for constructor. If the implementation of v-for expects the string labels for key and index, then your rindex and vindex will not work.
I see another problem, as quoted from the reference page in question: List Rendering in Vue
When iterating over an object, the order is based on the key enumeration order of Object.keys(), which is not guaranteed to be consistent across JavaScript engine implementations.
Therefore, your first cell may have (id, key, name) in that order, while your second cell may have (name, id, key) - different order. Therefore, the best way is to avoid object iterator for cell and explicitly define the order of appearance as follows:
<tr v-for="(person, index) in people">
<td>{{ index }}</td>
<cell :value="index" valueType="index" :rowIndex="index"></cell>
<cell :value="person.id" valueType="id" :rowIndex="index"></cell>
<cell :value="person.name" valueType="name" :rowIndex="index"></cell>
</tr>
Now your cell ponent definition needs to be modified as:
Vue.ponent("cell", {
template: "#template-cell",
name: "row-value",
props: ["value", "valueType", "rowIndex"],
// your ponent code here...
})
Now you can use valueType and rowIndex inside your cell ponent.