Displaying, Looping, Searching, and Filtering Data Chapter 2
The filtering inputs do not need to be included in a form to work; however, it is good
practice to retain semantic HTML, even in a JavaScript application.
Binding the inputs
To bind inputs to a variable that can be accessed through your Vue instance requires an
HTML attribute to be added to the fields and a corresponding key added to the data object.
Create a variable in the data object for each of the fields so we can bind the form elements
to them:
data: {
people: [...],
currency: '$',
filterField: '',
filterQuery: '',
filterUserState: ''
}
The data object now has three additional keys: filterField, which will be used for
storing the value of the dropdown; filterQuery, the placeholder for data entered into the
textbox; and filterUserState, which allows us to store the radio button checkboxes.
Now there are data keys to utilize, we are able to bind form elements to them. Apply a v-
model="" attribute to each form field, with the value of the data key.
Here's an example:
<input type="text" id="filterQuery" v-model="filterQuery">
Make sure the two radio buttons have exactly the same v-model="" attribute: this is so
they can update the same value. To verify that it has worked, you can now output the data
variables and get the value of the fields.
Try outputting filterField or filterQuery and changing the fields.
{{ filterField }}