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.

<br />
methods {<br />
InitForm: function (row) {<br />
this.validationerrors = [];</p>
<p>// Keep track of the original row information, to allow us to cancel<br />
this._beforeEditingCache = Object.assign({}, row);<br />
this.row = row;<br />
}<br />
}<br />

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

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

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.