vue table - Manipulate single cell and update with new data

[yuvalka]

Hi, I have a vue table that each is bound to the "detail-row-id" (just id). There is an edit button in each row that opens a modal to edit stuff. so far so good.. But whenever the user clicks SAVE (in the modal) I want to trigger an event (or few events) that will update few cells within that particular row without re-render the whole table.

How can I do that ?

[ratiw]

@yuvalka You will have to manually update the underlying data for that row probably using this.$parent inside your modal component. You could also dispatch event(s) from your modal component and handle it from your main vue instance.

[yuvalka]

@ratiw Assuming I'm dispatching event 'vuetable:cellchaged' with id=X and some data (field_name and value) and listen to it in the main vuetable instance how can I reach the specific cell within the vue table instance ? Even if I use this.$parent, how can I reach the specific cell (row id and field name) ?

[ratiw]

@yuvalka If you're going to fork vuetable to do that, you can have a look at vuetable:cell-clicked event in the src\components\Vuetable.vue. Also, look at the template as well to see how it is defined and this example to see how the event is captured and used.

But I do have a feeling that you're using vuetable to do what it is not supposed to be used for. And I would really advice against trying to update/manipulate any cell yourself. You should let the reactivity of Vue.js to do the job instead.

[yuvalka]

@ratiw I've managed to do what I wanted by using direct update and implement an update event that is being dispatched from the inner modal instance (a child of the vue table instance)

events: {
            'vuetable:row-update': function (data) {
                this.$refs.vueTable.tableData.map(function (item) {
                    if (item.id == data.id) {
                        item.name = data.name;
                        item.last_name= data.last_name
                    }
                });
            }

thanks for your help !