Ở bài học trước chúng ta đã thấy được Vue.js hỗ trợ người rất mạnh mẽ về xử lý sự kiện thế nhưng không chỉ có thế Vuejs cũng hỗ trợ cho người dùng mạnh trong phần ràng buộc các input trong form. Form input binding trong Vue.js (ràng buộc input form) chính là nội dung trong bài học ngày hôm nay của chúng ta, mời các bạn cùng theo dõi nhé!
1. Cách sử dụng cơ bản
Vue cung cấp cho chúng ta v-model directive để tạo ra các ràng buộc dữ liệu hai chiều trên các input và text area element. Vue sẽ tự động chọn cách phù hợp để cập nhật phần tử này dựa trên kiểu của input. Mặc dù nó mang một chút ma thuật thế nhưng về cơ bản thì thì v-model là một cú pháp đường dẫn trong việc cập nhật dữ liệu dựa trên các sự kiện input từ người dùng kèm theo một số trường hợp đặc biệt khác.
V-model sẽ bỏ qua tất cả các khởi tạo của value, checked hay selected trên các thành phần của form. Đồng thời nó luôn xử lý các dữ liệu có trong Vue instance, chính vì thế bạn nên khai báo các giá trị khởi tạo của mình trong data scope của Vue instance.
Text
Ví dụ dưới dây sử dụng v-model trong Vue.js trên thẻ input.
<div id="app"> <input type="text" v-model="message" placeholder="Nhập cái gì đó vào đây đi bạn ey!"> <p>Mesage ={{message}}</p> </div> <script type="text/javascript"></script> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { message: null, } }); </script>
Chạy Code
Textarea
Ví dụ sử dụng v-model trên textarea.
<textarea v-model="message" placeholder="Nhập cái gì vào đây đi bạn ey, Hà Nội ko vội được đâu!" rows="5" cols="70"></textarea> <p>Mesage ={{message}}</p>
Đối với thẻ textarea thì chúng ta không thể bind dữ liệu bằng cách <textarea>{{ message }}</textarea> được, mà chúng ta phải sử dụng cú pháp v-model như ví dụ trên.
Checkbox
Ví dụ sử dụng v-model cho checkbox đơn
<div id="app"> <input type="checkbox" v-model="checked"> <label>{{checked}}</label> </div> <script type="text/javascript"></script> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { checked: false, } }); </script>
Chạy Code cho kết quả sau
Radio v-model
<div id="app"> <input type="radio" id="php" name="language" value="PHP" v-model="checked"> <label for="php">PHP</label> <input type="radio" id="js" name="language" value="CSS" v-model="checked"> <label for="js">CSS</label> <input type="radio" id="nodejs" name="language" value="Vue.js" v-model="checked"> <label for="nodejs">Vue.js</label> <p>Radio đã check:{{checked}}</p> </div> <script type="text/javascript"></script> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { checked: null, } }); </script>
Select
Select đơn
<div id="app"> <select name="language" v-model="selected"> <option disabled value="">Vui lòng chọn món</option> <option value="Thit rang chay canh">Thịt rang cháy cạnh</option> <option value="Ca tam nuong cham cheo">Cá tầm nướng chẩm chéo</option> <option value="Tom hum nuong sa te">Tôm hùm nướng sa tế</option> </select> <p>Select đã chọn:{{selected}}</p> </div> <script type="text/javascript"></script> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { selected: '', } }); </script>
Chạy Code
Nếu giá trị khởi tạo của biểu thức trong v-model không khớp với bất kỳ option nào, thì <select> sẽ render ở trạng thái “chưa được chọn”. Trên iOS nó sẽ làm cho người dùng không thể chọn item đầu tiên bởi vì iOS không gọi sự kiện change trong trường hợp này. Do đó chúng tôi khuyên bạn nên thêm một lựa chọn có giá trị rỗng giống như trong ví dụ trên.
Multi select
<div id="app"> <select name="language" v-model="selected" multiple> <option value="" disabled="true" selected>Chọn món để chén thôi...</option> <option value="Cá tầm nướng muối ớt">Cá tầm nướng muối ớt</option> <option value="Mực nướng mật óng">Mực nướng mật ong</option> <option value="Gà nướng mật ong rừng">Gà nướng mật ong rừng</option> </select> <p>Select đã chọn:{{selected}}</p> </div> <script type="text/javascript"></script> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { selected: [], } }); </script>
Kết hợp v-for để render ra dữ liệu cho select element.
<div id="app"> <select name="language" v-model="selected"> <option v-for="item in option" v-bind:value="item.value">{{item.text}}</option> </select> <p>Select đã chọn:{{selected}}</p> </div> <script type="text/javascript"></script> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { selected: 'js', option: [ { text: 'PHP', value: 'php' }, { text: 'CSS', value: 'css' }, { text: 'Ajax', value: 'ajax' }, { text: 'Vue.js', value: 'vuejs' }, ], } }); </script>
2. Value bindings.
V-model ở các thành phần là khác nhau
- Thành phần là radio hoặc select option thì v-model thường sẽ là chuỗi tĩnh
- Ccheckbox thì thường sẽ là giá trị boolean true false.
Thế nhưng chúng ta muốn sử các thuộc tính có giá trị động trên vue instance thì sao. Không sao cả với Vue chúng ta có thể sử dụng v-bind directive để thực hiện điều đó.
Ví dụ đối với checkbox element.
<div id="app"> <input type="checkbox" v-model="toggle" v-bind:true-value="yes" v-bind:false-value="no"> </div> <script type="text/javascript"></script> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { toggle: true, yes: true, no: false, } }); </script>
Ở trên nếu như giá trị của toggle mà bằng giá trị của yes thì checkbox sẽ checked và ngược lại giá trị của toggle mà bằng giá trị của nó thì checkbox sẽ unchecked.Điều này cũng xảy ra tương tự đối với radio và selected.
3. Modifiers.
.lazy
Trừ các ngôn ngữ IME ra bình thường v-model sẽ tự động đồng bộ trong quá trình soạn thảo thế nhưng nếu bạn muốn thay đổi trạng thái đó thì bạn có thể sử dụng .lazy modifier để chuyển đổi nó sang trạng thái change event (có nghĩa là khi input thay đổi thì dữ liệu mới tiến hành đồng bộ).
Ví dụ:
<div id="app"> <input type="text" v-model.lazy="message" placeholder="nhập dữ liệu bạn ey..."> <p>message ={{message}}</p> </div> <script type="text/javascript"></script> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { message: null } }); </script>
.number
Chúng ta có thể sử dụng modifier .number để ràng buộc dữ liệu đầu vào của input chỉ được phép là số. Điều này cực kỳ có ích, bời ngay cả các input mà có type bằng number (type=number) nó cũng luôn trả về giá trị là 1 string.
Vú dị:
<div id="app"> <input type="text" v-model.number="message" placeholder="nhập dữ liệu nào bạn ey..."> <p>message ={{message}}</p> </div> <script type="text/javascript"></script> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { message: null } }); </script>
.trim
Nếu dữ liệu có khoảng trắng thừa ở 2 đầu chúng ta có thể sử dụng .trim modifier để loại bỏ chúng
Ví dụ:
<div id="app"> <input type="text" v-model.trim="message" placeholder="nhập dữ liệu nào bạn ey..."> <p>message ={{message}}</p> </div> <script type="text/javascript"></script> <script type="text/javascript"> var app = new Vue({ el: '#app', data: { message: null } }); </script>
4. v-model với component.
Phần này sẽ được đề cập chi tiết trong bài component trong Vue.js nhé các bạn
5. Lời kết
v-model của Vuejs chỉ hoạt động tốt trên các ngôn ngữ dạng latinh thôi, các dạng ngôn ngữ thuộc loại IME (là loại dành cho mấy ngôn ngữ hàn quốc, nhật bản, trung quốc, ...) thì v-model nó sẽ không thể đồng bộ hóa dữ liệu trong quá trình soạn thảo hoặc changing được mà chúng ta phải sử dụng các directive sự kiện.
