v-model trong Vue.js: Hiểu rõ cách hoạt động và ứng dụng

v-model là một chỉ thị đặc biệt trong Vue.js, được sử dụng để tạo ra liên kết dữ liệu hai chiều (two-way data binding) giữa các phần tử biểu mẫu (form inputs) và dữ liệu trong instance Vue. Nó đơn giản hóa việc xử lý các giá trị nhập vào từ người dùng, tự động cập nhật dữ liệu khi người dùng thay đổi giá trị và ngược lại, tự động cập nhật giá trị hiển thị trên giao diện khi dữ liệu thay đổi.

v-model hoạt động như thế nào?#

Để hiểu rõ cách v-model hoạt động, chúng ta cần biết rằng nó thực chất là một cú pháp đường tắt (syntactic sugar) cho hai chỉ thị cơ bản của Vue:

• v-bind:value (hoặc viết tắt là :value): Liên kết giá trị của phần tử nhập liệu với một thuộc tính dữ liệu trong instance Vue theo một chiều (từ dữ liệu ra giao diện).
• v-on:input (hoặc viết tắt là @input): Lắng nghe sự kiện input (hoặc các sự kiện tương tự như change, checked) của phần tử nhập liệu và cập nhật thuộc tính dữ liệu tương ứng khi có thay đổi.

Hãy xem xét một ví dụ đơn giản với input text:

<template>
  <input type="text" v-model="message">
  <p>Bạn đã nhập: {{ message }}</p>
</template>
<script>
export default {
  data() {
    return {
      message: '
    };
  }
};
</script>

Đoạn mã trên tương đương với việc viết tường minh như sau:

<template>
  <input
    type="text"
    :value="message"
    @input="event => message = event.target.value"
  >
  <p>Bạn đã nhập: {{ message }}</p>
</template>

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

Như bạn có thể thấy, v-model tự động xử lý việc gán giá trị từ message vào thuộc tính value của input và cập nhật lại message khi sự kiện input xảy ra. Đây là cách hoạt động cơ bản của v-model cho các phần tử <input type="text">, <textarea>.

Cách v-model hoạt động với các loại input khác nhau:#

• <input type="checkbox">:v-model sử dụng thuộc tính checked và sự kiện change. Đối với một checkbox đơn, nó liên kết với một giá trị boolean. Đối với nhiều checkbox, nó liên kết với một mảng.
• <input type="radio">:v-model sử dụng thuộc tính checked và sự kiện change. Nó liên kết với giá trị của value của radio button đã được chọn.
• <select>:v-model sử dụng thuộc tính value và sự kiện change. Nó liên kết với giá trị của <option> được chọn. Đối với <select multiple>, nó liên kết với một mảng các giá trị đã chọn.
• Các component tùy chỉnh (Custom Components): Mặc định, v-model trên một component tùy chỉnh sử dụng thuộc tính value và sự kiện input. Tuy nhiên, bạn có thể tùy chỉnh tên thuộc tính và sự kiện bằng cách sử dụng prop model trong định nghĩa component.

Bộ sửa đổi (Modifiers) của v-model:#

Vue.js cung cấp một số bộ sửa đổi cho v-model để tinh chỉnh hành vi của nó:

• .lazy: Mặc định, v-model đồng bộ hóa dữ liệu với mỗi lần gõ phím (sự kiện input). Với .lazy, dữ liệu sẽ được đồng bộ hóa khi sự kiện change xảy ra (thường là khi người dùng thoát khỏi trường nhập liệu).
• .number: Tự động chuyển đổi giá trị nhập vào thành kiểu số. Nếu không thể chuyển đổi, giá trị gốc sẽ được trả về.
• .trim: Tự động loại bỏ khoảng trắng ở đầu và cuối chuỗi nhập vào.

Tóm lại, v-model là một công cụ mạnh mẽ giúp đơn giản hóa việc xử lý dữ liệu biểu mẫu trong Vue.js bằng cách cung cấp liên kết dữ liệu hai chiều một cách hiệu quả và dễ sử dụng.