How to optimize data binding on table representing data organized as columns

Question

I can't get how to properly use computed properties when displaying data organized as columns with table. The full example of my code is available at jsfiddle, here is the short version and description. I want to render this data as a table:

var vueData = {
  objects: [
    {
      name: "objectName",
      objectData: [
        {prop1: "val1", prop2: "val2"}
      ]
    }
  ]
}

In this vueData each element of objectData array should be displayed as a column (that column represents data of one month or day). The props in objectData's elements should be displayed not as is, but as computed values. And that displayed values should reflect changes of vueData.

So I came to this vue template:

<table>
<tr>
  <th>Object Name</th>
  <th>Data Piece 1</th>
  <th>Data Piece 2</th>
</tr>
<template v-for="obj in objects">
<tr> 
  <th rowspan="2">{{ obj.name }}</th>
  <td v-for="dataPiece in obj.objectData">{{ compute(dataPiece.prop1) }}</td>
</tr>
<tr><td v-for="dataPiece in obj.objectData">{{ compute(dataPiece.prop2) }}</td></tr>
</template>
</table>

All works fine except that I have used methods, not vue's computed properties. The problem with methods is that their results do not cache and after a single prop change ALL cells' values are recomputed.

I could use a vue component for each cell with computed property instead of tds , but it looks like overkill, as table can be big.

Is there any another solution from the vue's point of view? (I mean without changing the data structire or appearance of the table, etc).

This is one of very few shortcomings in Vue: no way to create dynamic computeds. Best idea I have is to implement caching in your compute function. — Roy J
try the second answer from this post, it should help: stackoverflow.com/questions/40322404/… — V. Sambor

Roy J Roy J · Accepted Answer · 2018-01-30T01:55:30

I had wanted to do this with a directive, but had no good way of passing the function and the argument, until I remembered I can use vnode.context to get context, where I can lookup the function by name rather than passing it as an actual function.

So here's a directive that updates its element's textContent with the result of a function call.

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: {
    compute: function(prop) {
      console.log('computing ' + prop);
      return 'computed(' + prop + ')';
    }
  },
  directives: {
    cache(el, binding, vnode) {
      if (binding.value !== binding.oldValue) {
        el.textContent = vnode.context[binding.arg](binding.value);
      }
    }
  },
  computed: {
    firstProp: function() {
      return this.objects[0].objectData[0].prop1;
    }
  }
});

setTimeout(function() {
  vueData.objects[0].objectData[0].prop1 = 'changed on timeout';
}, 3000);

th,
td {
  border: 1px solid black;
}

<script src="//unpkg.com/vue@latest/dist/vue.js"></script>
<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 in objects">
      <tr>
        <th rowspan="2">{{ obj.name }}</th>
        <td v-for="dataPiece in obj.objectData"
          v-cache:compute="dataPiece.prop1"
          >
        </td>
      </tr>
      <tr>
        <td v-for="dataPiece in obj.objectData"
          v-cache:compute="dataPiece.prop2">
        </td>
      </tr>
    </template>
  </table>
  <span>Computed prop1 value = {{ firstProp }}</span>
</div>

How to optimize data binding on table representing data organized as columns

3 Answers