Great episode, however I'm wondering if someone can expand on the concept of the originalData variable used in this episode. As shown in the video, orignalData first gets set in the Form constructor method, and is set from the data variable passed to the new Form instance:

constructor(data) {
    this.originalData = data;
    for (let field in data) {
        this[field] = data[field];
    }

    this.errors = new Errors();
}

In this example, data will have two properties(fields), name and description, that are always being instantiated as empty strings.

data: {
    form: new Form({
        name: '',
        description: '',
    }),
},

This means originalData will essentially contain empty values for these two fields.

Then, in the forms reset method, we loop through each field in originalData and set it to an empty string (even though the values of the fields are already empty strings)

reset() {
    for (let field in this.originalData) {
        this[field] = '';
    }
}

Additionally, with all this in mind, I suppose I'm still not sure how the inputs on the form are then being bound to this originalData variable to be cleared. As far as I can tell, they are being bound with the data form object via v-model. This allows the input text to be bound at the new Vue instance, but originalData is always being instantiated as fields with empty strings (as far as I can tell). How do the form inputs then know to use originalData to "reset" their values. There's a disconnect in my head that I just can't seem to piece together.

Thanks in advance for any replies.

Object-Oriented Forms: Part 2

Updated Series Available