vue js Login Form get http json data

In this Post We Will Explain About is vue js Login Form get http json data With Example and Demo.

Welcome on infinityknow.com – Examples ,The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to vue js Login Form with get all fields json data

In this post we will show you Best way to implement vue js http get json example, hear for How to Vuejs get data json using php with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

READ :  Vuejs Computed Properties - Vue Watch Completed property

External libs js/css

<link href="//cdn.bootcss.com/pure/0.6.0/pure-min.css" rel="stylesheet">
<script src="//cdn.bootcss.com/vue/1.0.11/vue.min.js"></script>

Markup Languages(index.html)

<form class="pure-form pure-form-stacked" v-on:submit.prevent="SimpleLogin" id="live-form">
  <fieldset>
    <legend>Vuejs Login Form</legend>

    <label for="grant-type">grant_type</label>
    <input id="grant-type" v-model="students.grant_type" type="text" readonly>

    <label for="client-id">student_id</label>
    <input id="client-id" v-model="students.student_id" type="text" readonly>

    <label for="username">Username</label>
    <input id="username" v-model="students.username" type="text" placeholder="Username">

    <label for="password">Password</label>
    <input id="password" v-model="students.password" type="password" placeholder="Password">

    <button type="submit" class="pure-button pure-button-primary">SUBMIT</button>
    <p v-if="dataSubmit">{{dataSubmit|json}}</p>
  </fieldset>
</form>

javascript file(index.js)

new Vue({
  el: '#live-form',
  data: {
    students: {
      'grant_type': 'password',
      username: null,
      password: null,
      'student_id': 'live24u-admin'
    },
    dataSubmit: null
  },
  methods: {
    SimpleLogin: function() {
      this.dataSubmit = this.students;
    }
  }
});

style.css

#live-form{
	  margin-left 20px;
}

Example

I hope you have Got vue js http get example with parameters And how it works.I would Like to have FeadBack From My Blog(infinityknow.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(infinityknow.com) Are Most Always Welcome.

READ :  VueJS http Get AJAX Request Example