Vue.js là framework hoạt động theo mô hình MVVM hay dữ liệu được gán theo hai chiều. Bạn có nhớ ví dụ đầu tiên trong bài đầu của Khóa học Vue.js này:
Ví dụ này thật đơn giản nhưng ẩn chứa những sức mạnh phi thường giúp chúng ta có thể viết các ứng dụng áp dụng two-way data binding dễ dàng. Trước khi đến với cú pháp v-model, chúng ta cùng xem ví dụ sau:
<html>
<head>
<title>Gán dữ liệu hai chiều với v-model Vue.js - Allaravel.com</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
<div class="container" id="app">
<div class="row">
<div class="col-md-12">
<h1>Ví dụ giả lập gán dữ liệu hai chiều sử dụng v-bind và v-on</h1>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h2 class="text-success">{{ message }}</h2>
</div>
</div>
<div class="row">
<div class="col-md-2 text-right">
<label>Nhập lời chào</label>
</div>
<div class="col-md-6">
<input type="text" class="form-control" v-bind:value="message" v-on:keyup="message = $event.target.value">
</div>
</div>
</div>
<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
message: 'Xin chào, tôi là Vue.js!'
}
})
</script>
</body>
</html>Ví dụ này hoạt động giống hệt với ví dụ Hello world ở trên và một điểm chú ý chúng ta không dùng đến v-model tí nào. Dữ liệu được gán hai chiều thông qua đoạn code:
<input type="text" class="form-control" v-bind:value="message" v-on:keyup="message = $event.target.value">- v-bind gán giá trị biến message vào thuộc tính value của thẻ
<input>. - v-on lắng nghe sự kiện keyup là khi gõ văn bản vào ô nhập liệu thì nó sẽ gán text vừa nhập vào biến message.
Bạn chưa nắm rõ về v-bind và v-on có thể tham khảo lại hai bài viết:
Như vậy chúng ta đã có dữ liệu được gán hai chiều, vậy v-model cần làm gì? Thực ra v-model là cú pháp ngắn gọn cho cú pháp tổng hợp cả v-bind và v-on ở trên. Thay vì viết dài dòng như ở trên, chúng ta chỉ cần viết lại như sau:
<input type="text" class="form-control" v-model="message">Chú ý, v-model bỏ qua các thuộc tính thiết lập giá trị ban đầu cho các thẻ HTML của form như value, checked, selected. Nếu bạn muốn khởi tạo các giá trị này, thiết lập giá trị mặc định cho các biến tương ứng trong thuộc tính data của thực thể Vue. Tiếp theo, bạn hãy cùng tôi lượt qua cách sử dụng v-model với tất cả các thành phần HTML của form như text box, text area, checkbox, radio, select...
1. Sử dụng v-model với các thành phần của form nhập liệu
1.1 Textbox
<div id="ex9">
<input v-model="message" placeholder="Nhập tên của bạn">
<p>Tên của bạn là: {{ message }}</p>
</div>1.2 Textarea
<span>Multiline message is:</span>
<p style="white-space: pre">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>1.3 Checkbox
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>Nhiều checkbox trong form nhập liệu:
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>1.4 Radio
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>1.5 Select
Single select
<select v-model="selected">
<option disabled value="">Please select one</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>new Vue({
el: '...',
data: {
selected: ''
}
})Multiple select
<select v-model="selected" multiple>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<br>
<span>Selected: {{ selected }}</span>Với thanh Select, chúng ta có thể render bằng cách sử dụng v-for (Xem Cấu trúc lặp trong Vue.js).
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<span>Selected: {{ selected }}</span>new Vue({
el: '...',
data: {
selected: 'A',
options: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
]
}
})2. Một số tùy chọn trong v-model
2.1 Thay đổi sự kiện v-model dùng cập nhật dữ liệu
Mặc định, v-model sử dung sự kiện input để cập nhật dữ liệu xuống model, do vậy ngay khi bạn thay đổi văn bản thì dữ liệu của model cũng thay đổi theo. Tuy nhiên, không phải lúc nào bạn cũng muốn sự thay đổi này được cập nhật liên tục mà muốn sau khi thay đổi tất cả thì mới cập nhật. Tùy chọn .lazy sẽ giúp bạn thực hiện điều này, với tùy chọn này thay vì sử dụng sự kiện input, v-model sẽ sử dụng sự kiện change. Chúng ta cùng xem ví dụ sau đây:
Với ô nhập liệu sử dụng v-model.lazy, khi bạn thay đổi xong văn bản và chuyển sang thành phần khác trong giao diện, khi đó sự kiện change văn bản của ô nhập liệu mới xảy ra và dữ liệu mới được cập nhật xuống model.
2.2 Chuyển dạng dữ liệu
Nếu bạn muốn chuyển đổi dạng dữ liệu người dùng nhập sang thành số, sử dụng tùy chọn .number.
<input v-model.number="age" type="number">2.3 Loại bỏ ký tự trắng hai đầu chuỗi
Xử lý chuỗi các ký tự thường phải bỏ đi các ký tự trắng ở hai đầu, v-model có tùy chọn .trim để thực hiện việc này.
<input type="text" v-model.trim="message">3. Lời kết
V-model là sự kết hợp giữa v-bind và v-on, với cú pháp này làm việc với form nhập liệu thật sự cực kỳ tường minh và dễ dàng. Sở dĩ bài viết giới thiệu cả hai cách thức bởi có một số trường hợp v-model không xử lý được như vậy chúng ta cần xử lý thủ công với v-bind và v-on. Ví dụ, khi xử lý ô nhập liệu ngày tháng, dữ liệu sẽ được lưu trữ dạng chuỗi ISO yyyy-mm-dd, tuy nhiên nếu chúng ta muốn dữ liệu phải là dạng đối tượng ngày tháng thì thế nào, bắt buộc phải dùng đến v-bind và v-on thôi.
Ví dụ tiếp theo sử dụng v-bind kết hợp v-on, khi đó biến date sẽ lưu trữ đối tượng ngày tháng chứ không phải một chuỗi ISO.
Phần v-model này sẽ không có bài tập và đây cũng là bài cuối cùng trong phần các cú pháp cơ bản của Vue.js, nếu có thời gian bạn hãy ôn lại các kiến thức về các cú pháp {{ }}, v-bind, v-html, v-on, v-if, v-for... Các kiến thức này là nền tảng rất cơ bản cho phần tiếp theo là các kiến thức đi sâu hơn vào framework Vue.js.
CÁC BÀI VIẾT KHÁC
0 Bình luận trong "Xử lý form nhập liệu với v-model trong Vue.js"