Example p308

This example shows the form input binding using v-model. This binding is bi-directional: when the user inputs data in the form control, the corresponding property in the data model is updated. Similarly, when the property is updated in JavaScript, the form control in the UI is updated accordingly.

Name

University

Year of study

Year 1 Year 2 Year 3 Year 4

Favourite sports

running football swimming

vm.name = {{ name }}
vm.univ = {{ univ }}
vm.studyYear = {{ studyYear }}
vm.favSports = {{ favSports }}

Try the following

Reference: forms
Use the form controls to change the user data, and check that list below shows the data in the view model
Change the view model in JavaScript, e.g. vm.name = 'Peter'