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 ever…


This content originally appeared on DEV Community and was authored by Abanoub George

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/

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

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

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

Note: v-model is the two 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)
    }
  }

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

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


This content originally appeared on DEV Community and was authored by Abanoub George


Print Share Comment Cite Upload Translate Updates
APA

Abanoub George | Sciencx (2021-09-13T19:41:07+00:00) Form Handling Tutorial. Retrieved from https://www.scien.cx/2021/09/13/form-handling-tutorial/

MLA
" » Form Handling Tutorial." Abanoub George | Sciencx - Monday September 13, 2021, https://www.scien.cx/2021/09/13/form-handling-tutorial/
HARVARD
Abanoub George | Sciencx Monday September 13, 2021 » Form Handling Tutorial., viewed ,<https://www.scien.cx/2021/09/13/form-handling-tutorial/>
VANCOUVER
Abanoub George | Sciencx - » Form Handling Tutorial. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/09/13/form-handling-tutorial/
CHICAGO
" » Form Handling Tutorial." Abanoub George | Sciencx - Accessed . https://www.scien.cx/2021/09/13/form-handling-tutorial/
IEEE
" » Form Handling Tutorial." Abanoub George | Sciencx [Online]. Available: https://www.scien.cx/2021/09/13/form-handling-tutorial/. [Accessed: ]
rf:citation
» Form Handling Tutorial | Abanoub George | Sciencx | https://www.scien.cx/2021/09/13/form-handling-tutorial/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts