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 

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

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

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

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'

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
2. remove all code in src/App.vue

Add Html Form using Bootstrap Form

The form will be like

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:'',
      }
    }
  },

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

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

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 Note : @submit.prevent="addUser()" use the prevent To stop this behavior,
2. show the data in console will be like

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

1. add Html Code
2. to switch the value of Boolean value from False to true to show the data

  methods : {
    addUser(){
      this.showUserInfo = true;
    }
  }

Finally the Form and User Information will be like

you can find the Code in Github

And that’s it! i hope you enjoyed

Comments

[reem hosny]

Very useful , keep up the good work 👏

[Abanoub George]

Thanks alot Reem 😍

[KerolosSadek]

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

[Abanoub George]

Thanks kero for your words ❤