Building A Basic Form With Vue

Building a Basic Form with Vue

In this post, we will give you information about Building a Basic Form with Vue. Here we will give you detail about Building a Basic Form with Vue – onlinecode And how to use it also give you a demo for it if it is necessary.

Vue’s v-model directive binds the value of an HTML input tag to a JavaScript variable. That makes it ideal for building a form.

For example, suppose you’re building a login form that you want to submit with a HTTP POST request using Axios.
Here’s how that looks:

const app = new Vue({
  // 'v-model' binds 'email' to a text input in the template,
  // and 'password' to a password input.
  data: () => ({ email: '', password: '' }),
  methods: {
    submit: async function() {
      await axios.post('http://httpbin.org/post', {
        email: this.email,
        password: this.password
      });
    }
  },
  template: '
    <div>
      <input
        type="text"
        v-model="email"
        placeholder="Email">
      <input
        type="password"
        v-model="password"
        placeholder="Password">
      <button v-on:click="submit()">
        Submit
      </button>
    </div>
  '
});

Basic Form Validation for Building a Basic Form with Vue

Computed properties are a neat way to handle form validation in Vue. You can define a emailError property that Vue then updates whenever the email changes. You can then disable the “Submit” button whenever there’s an emailError:

const app = new Vue({
  data: () => ({ email: '', password: '' }),
  computed: {
    emailError: function() {
      if (this.email.length === 0) {
        return 'Email is required';
      }
      if (!this.email.includes('@')) {
        return 'Email must contain "@"';
      }
      return null;
    }
  },
  methods: {
    submit: async function() {
      await axios.post('http://httpbin.org/post', {
        email: this.email,
        password: this.password
      });
    }
  },
  template: '
    <div>
      <input
        type="text"
        v-model="email"
        placeholder="Email">
      <input
        type="password"
        v-model="password"
        placeholder="Password">
      <button v-on:click="submit()" v-bind:disabled="emailError">
        Submit
      </button>
      <div>
        {{emailError}}
      </div>
    </div>
  '
});

Computed properties can rely on other computed properties, so you can define a separate isFormValid computed property that relies
on computed properties for other fields:

const app = new Vue({
  data: () => ({ email: '', password: '' }),
  computed: {
    emailError: function() {
      if (this.email.length === 0) {
        return 'Email is required';
      }
      if (!this.email.includes('@')) {
        return 'Email must contain "@"';
      }
      return null;
    },
    passwordError: function() {
      if (this.password.length === 0) {
        return 'Password is required';
      }
      return null;
    },
    isFormValid: function() {
      return this.emailError == null && this.passwordError == null;
    }
  },
  methods: {
    submit: async function() {
      await axios.post('http://httpbin.org/post', {
        email: this.email,
        password: this.password
      });
    }
  },
  template: '
    <div>
      <input
        type="text"
        v-model="email"
        placeholder="Email">
      <input
        type="password"
        v-model="password"
        placeholder="Password">
      <button v-on:click="submit()" v-bind:disabled="!isFormValid">
        Submit
      </button>
    </div>
  '
});

Vue School has some of our favorite Vue video courses. Their Vue.js Master Class walks you through building a real world application, and does a great job of teaching you how to integrate Vue with Firebase for Building a Basic Form with Vue.

Vue.js is a progressive JavaScript framework that makes building user interfaces simple and enjoyable. Vue is designed from the ground up to be incrementally adoptable, so you can use the features you need, and mix and match Vue with other libraries or frameworks.

Vue is a relatively new framework, but it has quickly become one of the most popular JavaScript frameworks in the world. It is used by large companies like Alibaba, Baidu, and Xiaomi, as well as by thousands of smaller businesses and startups.

Here are some of the features that make Vue.js so popular:

Declarative rendering: Vue uses a declarative rendering model, which means that you can describe the desired output of your application in terms of HTML, CSS, and JavaScript. This makes it easy to reason about your code and to make changes to your application.
Reactivity: Vue is a reactive framework, which means that it automatically updates the DOM whenever there is a change to the application’s state. This makes your application feel fast and responsive.
Composition: Vue is a component-based framework, which means that you can build your application out of reusable components. This makes your code more maintainable and easier to test.
Performance: Vue is a highly performant framework. It has been benchmarked against other popular JavaScript frameworks, and it has consistently outperformed them.