Move v-for logic to computed property

Question

With my code is nothing wrong (i hope), although I feel it could be better written. I tried move

logic from to computed property but unsuccessfully, i think table structure is not correct, but I'm out of ideas. Anyone can help ? Unfortunately "tabl" comes from the server and i cant changes this variable

<template>
  <movable-div>
    <template #header>
      <div class="header">
        <h3>{{ name }}</h3>
        <div @mousedown.stop="dragMouseDown">
          <input type="text" v-model="search" placeholder="Search..." />
        </div>
        <div class="button-group">
          <svg width="1.2em" height="1.2em" viewBox="0 0 10240 10240" @click="toggleTable()" :class="[showTable ? 'go' : 'back']">
            <path some long svg code... />
          </svg>
          <p @click="showTableAttributes()">X</p>
        </div>
      </div>
      <table v-if="showTable">
        <tr>
          <th v-for="head in tableHead" :key="head.Name">
            {{ head.Name }}
          </th>
        </tr>
        <tr
          v-for="row in filteredRow"
          :key="row.Key"
          class="data"
          @click="zoomToFeatureExtent(row)"
        >
          <td v-for="item in tableHead" :key="item.Name">
            <p v-html="row.filter((obj) => obj.Key === item.Name)
                  .map((item) => item.Value)
                  .join()
                  .replace(search, `<span style='color:#1D7CA7'><b>${search}</b></span>`)">
            </p>
          </td>
        </tr>
      </table>
    </template>
  </movable-div>
</template>

<script>

export default {
  props: ['olMap', 'LayerStyleName', 'name'],
  data() {
    return {
      tableHead: null,
      rows: null,
      table: {
       ColumnList: [{name: "ex1"},{name: "ex2"}],
       Name: "Example",
       RowList: [{Original:[{Key: "ex1", Value: "exampleValue"}]},
                 {Original:[{Key: "ex2", Value: "exampleValue"}]}]
      },
      showTable: true,
      layer: null,
      filteredRow: [],
      search: null,
    };
  },
  mounted() {
    this.rows = this.table.RowList;
    this.tableHead = this.table.ColumnList.filter((item) => item.Name !== 'geometry');
    this.search = '';
  },
  inject: ['showTableAttributes'],
  methods: {
    toggleTable() {
      this.showTable = !this.showTable;
    },
    zoomToFeatureExtent(value) {
      let extent = value
        .filter((item) => item.Key === 'geometry')
        .map((item) => item.Value);
      let view = this.olMap.getView();
      view.fit(extent[0], this.olMap.getSize());
      let res = view.getResolution();
      if (res < 0.5) {
        view.setResolution(0.9);
      }
    },
  },
  watch: {
    search: function (val) {
      this.filteredRow = [];
      for (let row of this.rows) {
        if (row.Original.map((obj) => obj.Value.toString().includes(val))
            .filter((i) => (i === true ? i : null))
            .join()) {
          this.filteredRow.push(row.Original);
        } else null;
      }
    },
  },
};
</script>

Answer 1

It's good practice (IMHO) to have the template void of any complex logic. It makes the code more maintainable since you don't have functionality split between your template and your script. It also allows for better performance if you can offload methods to cached variables which prevents static parts of code from re-calculating needlessly.

The following is a good example of improvement potential

<tr
  v-for="row in filteredRow"
  :key="row.Key"
  class="data"
  @click="zoomToFeatureExtent(row)"
>
  <td v-for="item in tableHead" :key="item.Name">
    <p
      v-html="row.filter((obj) => obj.Key === item.Name)
        .map((item) => item.Value)
        .join()
        .replace(search, `<span style='color:#1D7CA7'><b>${search}</b></span>`)"
    ></p>
  </td>
</tr>

I find reading this in the template is harder than in the script block (but YMMV), but performance wise you're doing extra loops. This script here does 3 loops: rows(filteredRow), columns(tableHead), then rows again(row.filter).

If you move the logic to a computed, you can simplify the logic and improve the performance. A computed will keep the data cached and update as needed, so if you change the value of search it will re-compute, but if an unrelated variable changes then it wouldn't, and the template wouldn't have to recalculate the values again. In your code, it seems like there's no much for other values that might change, but good practice anyway.

here's what that might look like (untested code)

computed: {
  tableData() {
    return this.filteredRow.map(row => {
      const cols = [];
      this.tableHead.forEach(item => {
        let value = "";
        if (col.Name === row.Key) {
          let value = item.Value.replace(search, `<span style='color:#1D7CA7'><b>${search}</b></span>`)
        }
        cols.push(value)
      });
      return {...row, cols};
    }) 
  }
},

<table v-if="showTable">
  <tr>
    <th v-for="head in tableHead" :key="head.Name">
      {{ head.Name }}
    </th>
  </tr>
  <tr
    v-for="row in tableData"
    :key="row.Key"
    class="data"
    @click="zoomToFeatureExtent(row)"
  >
    <td v-for="(cell, i) in row.cols" :key="i">
      <p v-html="cell"></p>
    </td>
  </tr>
</table>