DEV Community

Cover image for Form Handling Tutorial
Abanoub George
Abanoub George

Posted on

Form Handling Tutorial

The Vue CLI is an awesome tool to kick-start your Vue projects. But by default — and rightly so — it comes with very little in the way of styling. Follow along and I’ll show you how to Create Form on Vue

Getting set up

In order to show every step from start to finish, I’m going to create a new project from scratch. If you already have a project (that you set up with Vue CLI 3), you can skip this section.

If you don’t already have Vue CLI version 3, install it.

Now create the app.

> vue create vue-form 
Enter fullscreen mode Exit fullscreen mode

I named my app “vue-form”, but you can name yours whatever you like

Once the app is created, move into the directory and serve the app.

> cd vue-form 
> npm run serve
Enter fullscreen mode Exit fullscreen mode

Your new Vue app is available at http://localhost:8080/

Alt Text

Adding Bootstrap styles

I’m going to add a Bootstrap component to the app
Still inside the vue-form directory, install Bootstrap and its dependencies

> npm install bootstrap jquery popper.js
Enter fullscreen mode Exit fullscreen mode

Note: If you’re not going to use Bootstrap’s JavaScript, and only going to use its styles, don’t worry about installing jQuery or Popper.js.

Finally, import it into the main script by adding these lines to the top of vue-form/src/main.js:

> import 'bootstrap'
> import 'bootstrap/dist/css/bootstrap.min.css'
Enter fullscreen mode Exit fullscreen mode

Again, if you only want the styles, and not the JavaScript functionality, just leave off the first line and only include the CSS.

Clear the Project

  1. remove the src/components/HelloWorld.vue Alt Text
  2. remove all code in src/App.vue Alt Text

Add Html Form using Bootstrap Form

Alt Text
The form will be like
Alt Text

Store the Data

we will create the object have all data from inputs we will store
it in userInfo Object

  data() {
    return {
      userInfo:{
        firstName:'',
        lastName:'',
        email:'', 
        password:'',
        address:'',
      }
    }
  },
Enter fullscreen mode Exit fullscreen mode

We Will Use v-model to bind the value form inputs

Note: v-model is the two way data binding in Vue.js bind the value from inputs

Alt Text

Note: we use the v-model like v-model="userInfo.firstName" userInfo.firstName write the userInfo as the main object and access the keys from this object

Add Function to get all Data

   methods : {
    addUser(){
      console.log(this.userInfo)
    }
  } 
Enter fullscreen mode Exit fullscreen mode

1.add function addUser in methods to get all data form the userInfo Object and console.log the data

  1. add the Function addUser in Form to handle the Function Alt Text Note : @submit.prevent="addUser()" use the prevent To stop this behavior,
  2. show the data in console will be like Alt Text

lets show the data in Browser

  1. add showUserInfo as Boolean value in data to show the user information if user click in submit , by default will be false
  data() {
    return {
      userInfo:{
        firstName:'',
        lastName:'',
        email:'', 
        password:'',
        address:'',
      },
      showUserInfo: false
    }
  },
Enter fullscreen mode Exit fullscreen mode
  1. add Html Code Alt Text
  2. to switch the value of Boolean value from False to true to show the data
  methods : {
    addUser(){
      this.showUserInfo = true;
    }
  }
Enter fullscreen mode Exit fullscreen mode

Finall the Form and User Information will be like

Alt Text

you can find the Code in Github

And that’s it! i hope you enjoyed

Discussion (4)

Collapse
reemhosny profile image
reem hosny

Very useful , keep up the good work 👏

Collapse
abanoubgeorge profile image
Abanoub George Author

Thanks alot Reem 😍

Collapse
kerolossadek profile image
KerolosSadek

Thanks, very useful article and made this topic easy♥🤝

Collapse
abanoubgeorge profile image
Abanoub George Author

Thanks kero for your words ❤