Working with forms in Vue

Image

In this article we will have a quick dive in working with forms in Vue. I think you've already tried a directive in Vue which is called v-model. It's not the best way to use it everywhere for data binding, but in forms its's the best choice.

Basic forms

Let's create the easiest form with single input.

App.vue

<form>
  <label>Username</label>
  <input type='text' v-model='username'>

  <label>Password</label>
  <input type='password' v-model='password'>

  <button>Login</button>
</form>

This is a basic html form and the only thing which we see here from Vue is v-model. This means that each time when we type something in our input, our username variable will be automatically updated.

Now we need to add form submitting. You can add click event to button, but it's bad practice because when you will hit enter in you input you form won't be submitted. It's better to add form submit attribute on our form. We can use special submit event for this.

App.vue

<form v-on:submit='onSubmit'>

Here we used v-on which helps us to add events. In this case we used submit to say that we want to submit a form.

Let's add onSubmit event and initial data now.

App.vue

export default {
  data () {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    onSubmit () {
      console.log('form was submitted', this.username)
    }
  }
}

We set username and password as empty strings in data and added onSubmit method which is called on form submit. When we type something in input now and click on the button we see console.log with filled name but it dissapeared because it's a form and our page is being reloaded.

We need to add preventDefault event to stop default behaviour. In Vue we can do this by adding a modifier to submit event.

<form v-on:submit.prevent='onSubmit'>

Now our page won't be reloaded and we see our console.log.

We can also simplify our v-bind notation with using alias to write less code.

App.vue

<form @submit.prevent='onSubmit'>

As you can see, everything is working as before.

Select

Quite often we also need to select some value from the list. Let's allow our user to select a country from the list. Let's add select in Vue way to our form.

App.vue

<form>
  ...
  <select v-model='selectedCountry'>
    <option v-for='country in countries'>
      {{country}}
    </option>
  </select>
</form>

It's just a normal select but there are two main differences. We put v-model on select to say that we want to store our selected value in selectedCountry variable. Also we used v-for loop to go through the list of countries and render each of them.

We also need to add selectedCountry and countries variabled to our data.

App.vue

data () {
  return {
    selectedCountry: '',
    countries: [
      'Austria',
      'Canada',
      'Netherlands'
    ]
  }
}

We set selectedCountry to an empty string and provided an array of counries.

Now let's add this.selectedCountry to our console.log to see if everything is working.

App.vue

onSubmit () {
  console.log('form was submitted', this.username, this.password, this.selectedCountry)
}

As you can see, we get username, password and selected country now. Working with select in Vue is really easy!

Radio button

In the same way as with select we can work with radio button. Let's allow our user to select gender.

First we need to add radio buttons.

App.vue

<div>
  <label>Male</label>
  <input
    type='radio'
    value='male'
    v-model='gender'
  />
  <label>Female</label>
  <input
    type='radio'
    value='female'
    v-model='gender'
  />
</div>

We have two radio buttons here and we set them both to the same v-model. This will change the selected radio button automatically.

Now we only need to add a default value for gender and update our console.log.

App.vue

export default {
  data () {
    return {
      ...
      gender: ''
    }
  },
  methods: {
    onSubmit () {
      console.log('form was submitted', this.username, this.password, this.selectedCountry, this.gender)
    }
  }
}

As you can see in browser, everything is working as expected.

We went through basic form creation in Vue using different html elements which are needed for forms. If you are interested in form validation you can have a look on vee-validate. It's the most popular package for validation for now.