Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

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 }}