มาดูวิธีการใช้ Form Bindings ใน VueJs กัน

เราจะใช้ v-bind กับ v-on เพื่อทำ two-way bindings ตามตัวอย่าง

<input :value="text" @input="onInput">

function onInput(e) {
  // a v-on handler receives the native DOM event
  // as the argument.
  text.value = e.target.value
}

ตัวอย่างแบบเต็ม ๆ

<script setup>
import { ref } from 'vue'

const text = ref('')

function onInput(e) {
  text.value = e.target.value
}
</script>

<template>
  <input :value="text" @input="onInput" placeholder="Type here">
  <p>{{ text }}</p>
</template>

เพื่อให้ง่ายต่อการใช้ two-way bindings และมีการใช้บ่อย ดังนั้น vue จึงกำหนด v-model มาให้ โดยจะใช้ได้ตามตัวอย่าง

<input v-model="text">

v-model ไม่ได้ใช้เฉพาะ input เท่านั้น ยังสามารถใช้กับ input อื่น ๆ ได้ด้วย

ตัวอย่างเต็ม ๆ

<script setup>
import { ref } from 'vue'

const text = ref('')
</script>

<template>
  <input v-model="text" placeholder="Type here">
  <p>{{ text }}</p>
</template>

ที่มา https://vuejs.org/tutorial/#step-5