Implement the form bindings

First of all, let's add the three fields to the data model, as follows:

export default {
name: 'RegisterPage',
data: function () {
return {
form: {
username: '',
emailAddress: '',
password: ''
}
}
}
}

With this change, the first test that we just added should be able to pass now. Let's run the npm run test:unit command to verify that. In the result, you should see something like the following:

Tests:       2 failed, 3 passed, 5 total

We have made some progress here. Now, let's bind the data model to the inputs in the form and also add the submitForm() method to handle the form submit event. The following is the change to RegisterPage.vue:

<template>
...
<form @submit.prevent="submitForm">
<div class="form-group">
<input type="text" class="form-control"
id="username" v-model="form.username">
</div>
<div class="form-group">
<input type="email" class="form-control"
id="emailAddress" v-model="form.emailAddress">
</div>
<div class="form-group">
<input type="password" class="form-control"
id="password" v-model="form.password">
</div>
</form>
...
</template>
<script>
export default {
...
methods: {
submitForm () {
}
}
}
</script>

In the previous listing, we have excluded unnecessary details of the form for the sake of brevity. As you can see, we use the @submit.prevent directive to bind the submit event to the submitForm() method. Currently, the handler's implementation is left blank. We use v-model directives to bind the input fields with the data model. With all of these changes, all four tests in RegisterPage.spec.js should be able to pass. Now, let's run the unit tests, and you should see that all of the tests have passed.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.145.166.149