How can I render partially in vue3?

#1

When I use my template with v-for, I tried to change one value of row in list.
But vuejs3 execute all list on v-for how can I render partially?

This is my code snippet

  1. gridTemplate.html
<script type="text/x-template" id="gridTemplate">
    <div class="table-responsive text-nowrap">
    <table>
    <thead>
    <tr>
    <th v-for="(colItem, colItemIdx) in options.cols">
    {{console('col', colItemIdx)}}
{{colItem.name}}
</th>
</tr>
</thead>

<tbody>
<tr v-for="(dataItem, dataItemIdx) in options.data">
    {{console('data', dataItemIdx)}}
    <td v-for="(colItem, colItemIdx) in options.cols">
        <div v-for="(item, itemIdx) in dataItem[colItem.name]">
            {{item}}
        </div>
    </td>
</tr>
</tbody>
</table>
</div>
</script>
  1. grid-template.js

const vueGrid = {
template: ‘#gridTemplate’,
props: {
options: Object
},
methods: {
// I used to check v-for when I change row data.
console: function (name, idx) {
console.log(name, idx);
}
}
}

  1. Caller
  • js

grid: {
cols: [{name: ‘col1’}, {name: ‘col2’}],
data: [{‘col1’: {value: ‘data1’}, ‘col2’: {value: ‘data2’}}]
}
setTimeout(function () {
_this.result.grid.data[0].col1.value = ‘change’;
console.log(_this.result.grid)
}, 3000);

  • html
    <grid :options="grid"/>
#2

Use components. Vue will isolate re-renders to just the components that have prop changes.