Handling User Input With V-model From Vue.js

image-sources
This tutorial, we will discuss about the input. Of course in a web application, the user will interact with input form. We can use input bindings in our component, with V-model,in V-model we can process value from the input of user input.

Create a Components .

We will create a simple component for, with some input for the user to be able to interact with our web application. I have some nice class style from bootstrap to make our input looks good. I have three input. user,password,email
Form.vue

<template>
  <div class="first-child">
<h3>Form User</h3>
    <div class="form-group">
      <label for="usr">Name:</label>
      <input type="text" class="form-control">
    </div>
    <div class="form-group">
      <label for="pwd">Password:</label>
      <input type="password" class="form-control">
    </div>
    <div class="form-group">
      <label for="pwd">Email:</label>
      <input type="text" class="form-control">
    </div>
  </div>
</template>
<script>
export default {
  data(){
    return{
    }
  }
}
</script>
(html comment removed:  Add "scoped" attribute to limit CSS to this component only )
<style scoped>
.first-child{
margin: 0 auto;
max-width: 600px;}
</style>

Use V-model

After we have created a component, we will start using v-model for our input binding. The thing to note is when we make the input model we must define it in the data (), like this.

export default {
  data(){
    return{
      name:'',
      password:'',
      email:''
    }
  }
}

I have 3 local datas that is defined for use in v-model, and here's how to use it. The datas have type string. < input type="text" class="form-control" v-model="name" >
v-model="name" : This how to use v-model in our input binding, you can change the "name" with your data local, data local and name of v-model, must the same.

Get Value From V-model

We will see how v-model can be very useful for taking value from user input, if you ever use jQuery to retrieve value input, then you will use this way
$(" selectorOfElement ").val( ) . But in Vue.jsit will be easier, just this way {{nameOfVModel}}. I will Print out the value from input, so you can see the results.

If you can see, when user type in input, V-model will automatically accommodate that value in local data.

Wrap the Input Value Into Object

In a form of data, we usually do not send value individually, but we will wrap it into an object. if we communicate with the API we should wrap it in an object to make data easier to use, especially in the REST API. So I will create a button with function, to fetch the object. but before that we will wrap the local data into object user

export default {
data(){
    return{
     user:{  
        name:'',
        password:'',
        email:''
      }
    }
  }
}

We wrap it with object user.So if you want to access the V-model . Access the Object first. You must access the object first. in this tutorial its name is user {{user.name}} , and I will make A button with the function showData( ). < button class="btn btn-primary"@click="showdata()">Submit.

 methods:{
    showdata(){
      console.log(this.user)
    }
  }

I will console log the object user , so you can see the data in form.

We can see the data in the input form we put together in an object, so we will be easier to access it, imagine if you do not wrap it you will read one by one data. so many tutorials this time, may be useful for you, thank you

---

Posted on Utopian.io - Rewarding Open Source Contributors

---