[Vuejs]-How to Reload a Vue table component after editing record?

by

0👍

You don’t need to reload all the page or table. First of all – it’s better to use id as key with v-for, not index(it will identify editable row more clearly). Then you can just emit edit event and change item in table:

this.$emit('edit', this.obj);

Then just listen to this event in table and edit item there:

<modal-component @edit="editEvent"></modal-component>

editEvent(obj) {
    this.data = this.data.map(item => {
        if(parseInt(item.id, 10) === parseInt(obj.id, 10)) {
            return obj;
        }

        return item;
    });
}

It will be faster then waiting API response(Also you should handle errors, but it’s on you).
Otherwise, if you don’t have access to modal component, you should store data in storage and get it from there (Update data in action).

Leave a comment