Form Handling Tutorial
Tags: vue, javascript, bootstrap
Published: 2021-09-13 19:41:07


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](https://cli.vuejs.org/guide/installation.html).

Now create the app.

```javascript
> 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.

```javascript
> cd vue-form 
> npm run serve
```
Your new Vue app is available at [http://localhost:8080/](http://localhost:8080/)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hy83wzrlo8hlq3nli986.PNG)
### 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](https://getbootstrap.com/docs/4.0/getting-started/javascript/#dependencies)

```javascript
> 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:`
```javascript
> 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`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jlc2kj72ze3fymboh0g8.PNG)
 2. remove all code in `src/App.vue`
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vwjluc9y4knymhwrfv6v.PNG)

### Add Html Form using Bootstrap Form 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mte41sjnriaukaq7ku85.PNG)
The form will be like 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2dmbd7x72s85e28qrxri.PNG)

## Store the Data 
 we will create the object have all data from inputs we will store 
 it in `userInfo` Object
 ```javascript
  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  

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/622l6fprsubr1gd206pw.PNG)
> 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
 ```javascript
   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 
2. add the Function `addUser` in Form to handle the Function
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r2ysvaesuz7y6zh6ccxu.PNG)
 Note : `@submit.prevent="addUser()"` use the prevent To stop this behavior,
3. show the data in console will be like
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/otvz0y4iqjzjm5bcty6a.PNG)

## 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`
```javascript
  data() {
    return {
      userInfo:{
        firstName:'',
        lastName:'',
        email:'', 
        password:'',
        address:'',
      },
      showUserInfo: false
    }
  },
```
2. add Html Code 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fj0qgkhau8hke2vg0q2m.PNG)
3. to switch the value of Boolean value from False to true to show the data 
```javascript
  methods : {
    addUser(){
      this.showUserInfo = true;
    }
  }
```
#Finally the Form and User Information will be like 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n68whetm986js3p3brvf.PNG)

#### you can find the Code in [Github](https://github.com/abanoub2017/vue-form)

And that’s it! i hope you enjoyed