JSFiddle - React, Tailwind, and code Playground
HTML
<div id="vue">
<table>
<tr>
<th>Object Name</th>
<th>Data Piece 1</th>
<th>Data Piece 2</th>
<th>Data Piece 3</th>
</tr>
<template v-for="(obj, i) in objects">
<tr>
<th rowspan="2">{{ obj.name }}</th>
<td v-for="(dataPiece, j) in obj.objectData">
{{ fetch(i,j,'prop1') }}
</td>
</tr>
<tr><td v-for="dataPiece in obj.objectData">
{{ compute(dataPiece.prop2) }}
</td></tr>
</template>
</table>
<span>Computed prop1 value = {{ firstProp }}</span>
</div>
CSS
th, td {
border: 1px solid black;
}
JavaScript
console.clear()
function mapObjectToComputed({objects}) {
console.log(objects)
let res = {}
objects.forEach((obj,i) => {
obj.objectData.forEach((dat,j) => {
['prop1', 'prop2'].forEach(prop => {
const propModel = `objects_${i}_${j}_${prop}`
const computedProp = {
get() {
console.log(`Getting ${propModel}`)
const val = this.objects[i].objectData[j][prop];
return val;
}
}
res[propModel] = computedProp
})
})
})
return res;
}
var vueData = {
objects: [
{name: 'Object 1', objectData: [
{prop1: '1-1-1', prop2: '1-1-2'},
{prop1: '1-2-1', prop2: '1-2-2'},
{prop1: '1-3-1', prop2: '1-3-2'}]},
{name: 'Object 2', objectData: [
{prop1: '2-1-1', prop2: '2-1-2'},
{prop1: '2-2-1', prop2: '2-2-2'},
{prop1: '2-3-1', prop2: '2-3-2'}]},
{name: 'Object 3', objectData: [
{prop1: '3-1-1', prop2: '3-1-2'},
{prop1: '3-2-1', prop2: '3-2-2'},
{prop1: '3-3-1', prop2: '3-3-2'}]},
]
};
var vue = new Vue({
el: document.getElementById("vue"),
data: vueData,
methods: {
fetch: function(i,j,prop) {
const propModel = `objects_${i}_${j}_${prop}`
return this[propModel];
},
compute: function(prop) {
console.log('computing ' + prop);
return 'computed(' + prop + ')';
}
},
computed: {
firstProp: function() {
return this.objects[0].objectData[0].prop1;
},
...mapObjectToComputed(vueData)
}
});
setTimeout(function (){
vueData.objects[0].objectData[0].prop1 = 'changed on timeout';
}, 2000);