1. Two-Way Binding คืออะไร?
Two-Way Binding เป็นคุณสมบัติที่ช่วยให้ข้อมูลใน Vue.js สามารถเชื่อมโยงระหว่าง View (HTML) และ Model (JavaScript) ได้แบบสองทาง ซึ่งหมายความว่าการเปลี่ยนแปลงข้อมูลในฟอร์มจะสะท้อนกลับไปยัง Data ใน Component และในทางกลับกัน Data ที่เปลี่ยนแปลงใน Component ก็จะอัปเดต View โดยอัตโนมัติ
Vue.js ใช้ Directive v-model
เพื่อรองรับการทำ Two-Way Binding
2. การใช้งาน v-model
v-model
สามารถใช้กับฟอร์ม Input เช่น <input>
, <textarea>
และ <select>
ตัวอย่างพื้นฐาน:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <template> <div> <h1>Two-Way Binding Example</h1> <input v-model="message" placeholder="Type something..." /> <p>You typed: {{ message }}</p> </div> </template> <script> export default { data() { return { message: '' }; } }; </script> |
ผลลัพธ์:
- เมื่อพิมพ์ข้อความใน Input ข้อมูลใน
message
จะเปลี่ยนแปลงทันที และข้อความใน<p>
จะแสดงผลตามข้อมูลที่พิมพ์
3. การใช้งานกับประเภท Input อื่น ๆ
Checkbox
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <template> <div> <h1>Checkbox Example</h1> <input type="checkbox" v-model="isChecked" /> <p>Checkbox is {{ isChecked ? 'checked' : 'not checked' }}</p> </div> </template> <script> export default { data() { return { isChecked: false }; } }; </script> |
Radio Button
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <template> <div> <h1>Radio Button Example</h1> <input type="radio" id="option1" value="Option 1" v-model="selectedOption" /> <label for="option1">Option 1</label> <input type="radio" id="option2" value="Option 2" v-model="selectedOption" /> <label for="option2">Option 2</label> <p>Selected: {{ selectedOption }}</p> </div> </template> <script> export default { data() { return { selectedOption: '' }; } }; </script> |
Dropdown (Select)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <template> <div> <h1>Select Example</h1> <select v-model="selected"> <option disabled value="">Please select an option</option> <option value="Option 1">Option 1</option> <option value="Option 2">Option 2</option> </select> <p>Selected: {{ selected }}</p> </div> </template> <script> export default { data() { return { selected: '' }; } }; </script> |
4. การใช้ Two-Way Binding กับ Object
คุณสามารถใช้ v-model
กับ Object เพื่อจัดการข้อมูลที่ซับซ้อนได้
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <template> <div> <h1>Two-Way Binding with Object</h1> <input v-model="user.name" placeholder="Enter your name" /> <input v-model="user.age" type="number" placeholder="Enter your age" /> <p>Name: {{ user.name }}</p> <p>Age: {{ user.age }}</p> </div> </template> <script> export default { data() { return { user: { name: '', age: null } }; } }; </script> |
5. การทำงานร่วมกับ Validation
คุณสามารถผสมผสาน v-model
กับ Validation เพื่อควบคุมการป้อนข้อมูลในฟอร์ม
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <template> <div> <h1>Validation Example</h1> <input v-model="email" placeholder="Enter your email" /> <p v-if="!isValidEmail">Invalid email address</p> </div> </template> <script> export default { data() { return { email: '' }; }, computed: { isValidEmail() { return this.email.includes('@'); } } }; </script> |
ผลลัพธ์:
- ข้อความ “Invalid email address” จะแสดงเมื่ออีเมลไม่ถูกต้อง
6. สรุป
ในบทนี้ คุณได้เรียนรู้เกี่ยวกับ:
- การใช้งาน
v-model
สำหรับ Two-Way Binding - การประยุกต์ใช้งานกับ Input ประเภทต่าง ๆ เช่น Checkbox, Radio, และ Select
- การจัดการข้อมูลที่ซับซ้อนด้วย Object
- การเพิ่ม Validation สำหรับฟอร์ม
ในบทถัดไป เราจะเรียนรู้เกี่ยวกับการแสดงผลแบบเงื่อนไข (Conditional Rendering) ด้วย v-if
และ v-show
!