Xử lý biểu mẫu với v-model trong Vue.js

Trong Vue.js, v-model là một directive mạnh mẽ giúp liên kết dữ liệu giữa form input và state của ứng dụng. Điều này giúp việc quản lý và xử lý biểu mẫu trở nên dễ dàng và trực quan hơn.

Xử lý biểu mẫu với v-model

1. Cách sử dụng v-model với các input khác nhau

• Input text:

  <input v-model="name" type="text" placeholder="Nhập tên">
  

• Textarea:

  <textarea v-model="message" placeholder="Nhập tin nhắn"></textarea>
  

• Checkbox:

  <input type="checkbox" v-model="agree"> Tôi đồng ý
  

• Radio button:

  <input type="radio" v-model="gender" value="male"> Nam
  <input type="radio" v-model="gender" value="female"> Nữ
  

• Select dropdown:

  <select v-model="country">
    <option value="vn">Việt Nam</option>
    <option value="us">Mỹ</option>
    <option value="jp">Nhật Bản</option>
  </select>
  

2. Two-way Binding với v-model

Vue.js sử dụng v-model để thực hiện Two-way binding, tức là dữ liệu trong state sẽ thay đổi khi người dùng nhập liệu vào form và ngược lại.

Ví dụ:

<template>
  <div>
    <input v-model="username" type="text" placeholder="Nhập tên">
    <p>Tên của bạn: {{ username }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: ''
    };
  }
};
</script>

3. Xử lý sự kiện nhập liệu và gửi form

• Khi người dùng nhập vào form, có thể xử lý sự kiện với @input, @change, @submit:

  <form @submit.prevent="submitForm">
    <input v-model="email" type="email" placeholder="Nhập email">
    <button type="submit">Gửi</button>
  </form>
  

• Trong methods xử lý khi form được gửi:

  methods: {
    submitForm() {
      console.log("Email nhập vào:", this.email);
    }
  }
  

Thực hành: Xây dựng biểu mẫu đăng ký đơn giản

Yêu cầu:

• Tạo form gồm các trường: Họ tên, email, giới tính, quốc gia, checkbox đồng ý điều khoản.
• Hiển thị dữ liệu nhập vào dưới form.
• Kiểm tra nếu người dùng chưa nhập đủ thông tin thì không cho submit.

Giải pháp:

<template>
  <div>
    <h2>Đăng ký tài khoản</h2>
    <form @submit.prevent="submitForm">
      <label>Họ và tên:</label>
      <input v-model="name" type="text" required>

      <label>Email:</label>
      <input v-model="email" type="email" required>

      <label>Giới tính:</label>
      <input type="radio" v-model="gender" value="male"> Nam
      <input type="radio" v-model="gender" value="female"> Nữ

      <label>Quốc gia:</label>
      <select v-model="country">
        <option value="vn">Việt Nam</option>
        <option value="us">Mỹ</option>
        <option value="jp">Nhật Bản</option>
      </select>

      <label>
        <input type="checkbox" v-model="agree">
        Tôi đồng ý với điều khoản sử dụng
      </label>

      <button type="submit" :disabled="!canSubmit">Đăng ký</button>
    </form>

    <h3>Thông tin đã nhập:</h3>
    <p>Họ tên: {{ name }}</p>
    <p>Email: {{ email }}</p>
    <p>Giới tính: {{ gender }}</p>
    <p>Quốc gia: {{ country }}</p>
    <p>Đồng ý điều khoản: {{ agree ? "Có" : "Không" }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "",
      email: "",
      gender: "",
      country: "",
      agree: false
    };
  },
  computed: {
    canSubmit() {
      return this.name && this.email && this.gender && this.country && this.agree;
    }
  },
  methods: {
    submitForm() {
      alert("Đăng ký thành công!");
    }
  }
};
</script>

<style scoped>
form {
  display: flex;
  flex-direction: column;
  max-width: 300px;
}
label {
  margin-top: 10px;
}
</style>

Kết luận

• v-model giúp rút gọn code khi làm việc với form trong Vue.js.
• Hỗ trợ liên kết dữ liệu giữa state và input một cách trực quan.
• Có thể kết hợp với computed properties để kiểm tra điều kiện nhập liệu trước khi gửi form.