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

One thing you may notice if you were to output the filterUserState variable is it appears to be in working, But, it is not getting the actual results desired. The output of the variable would be true and falseas set in the value attributes.

On closer inspection, the values are actually strings, rather than a Boolean value. A Boolean value is a hard true or false, 1 or 0, which you can easily compare against, whereas a string would require exact checking on a hardcoded string. This can be verified by outputting the typeof variable that it is:

      {{ typeof filterUserState }}

This can be resolved by binding the values of the radio buttons with the v-bind:value attribute. This attribute allows you to specify the value for Vue to interpret and can take Boolean, string, or object values. For now, we'll pass it true and false, as we were already doing with the standard value attribute, but Vue will know to interpret it as Boolean:

      <span>
        Active:
        <label for="userStateActive">
          Yes:
          <input type="radio" v-bind:value="true" id="userStateActive"       
         v-model="filterUserState" selected>
        </label>
        <label for="userStateInactive">
          No:
          <input type="radio" v-bind:value="false"       
         id="userStateInactive" v-model="filterUserState">
        </label>
      </span>

The next step is to show and hide the table rows based on these filters.