Dev to webs {Coding…}

เรียนรู้การพัฒนาซอฟเวอร์ เพื่อความรู้ที่ยั่งยืน

บทที่ 6: การ Binding ข้อมูลแบบสองทาง (Two-Way Binding) ใน Vue.js

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>

ตัวอย่างพื้นฐาน:

<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

<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

<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)

<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 เพื่อจัดการข้อมูลที่ซับซ้อนได้

<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 เพื่อควบคุมการป้อนข้อมูลในฟอร์ม

<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>