Vue.js cancel button

If you have a form with bound fields, then as you change the fields then the model will be changing. Suppose you want to cancel out of these changes.

In the component define a method to call when you initialise the form.

methods {
InitForm: function (row) {
this.validationerrors = [];

// Keep track of the original row information, to allow us to cancel
this._beforeEditingCache = Object.assign({}, row);
this.row = row;
}
}

I’ll explain the validationerrors array in a future post.

So when we’re initialising the form we store the pre edited data in _beforeEditingCache.

Then if we call the cancel method we just put the data back

methods: {
cancel() {
// Return the row back to it’s previous state
Object.assign(this.row, this._beforeEditingCache);
this.$emit('cancel_edit_mode');
}
}

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.