Building Forms with Vue.js

One more time – with dropdowns!

Before we wrap up the chapter, let's build a custom component that wraps up a drop-down input, in order to review what we have learned so far.

Begin by creating the component file—we are going to name it BaseSelect.vue, and place it inside the components folder.

Just as we did with BaseInput, first we are going to define our HTML template. We will leave some attributes empty for now, since we will bind them later. We will also set up some dummy data for easy testing. In component creation, you will find that small steps are the way to go!

Add the following code as a template for BaseSelect:

<template>  <div class="form-group"> <label>Label here</label> <select class="form-control"> <option value="">Test!</option> ...