[Vue.js] v-model คือ?

v-model เป็นพื้นฐานสำคัญของ Vue.js ที่ใช้เพื่อผูกข้อมูลกับตัวแปร เมื่อ user กรอกข้อมูลเข้ามาจะทำให้ตัวแปรที่ผูกนั้นได้รับ value จาก user ด้วย หรือในทางกลับกันถ้าหาก โค้ดของเราแก้ไขค่าตัวแปรนั้น user ก็จะเห็นค่าที่เปลี่ยนไปตามที่โค้ดเราเขียนเช่นกัน เรียกว่า "two-way data binding"

v-model สามารถใช้งานได้กับ input พื้นฐานทั้งหมด ดูโค้ดตัวอย่างได้ตามนี้

Input Text

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

จากตัวอย่างด้านบนเราผูก value กับตัวแปรชื่อ message ผ่าน v-model เมื่อ user กรอกข้อมูลเข้ามาที่ input ข้อความที่แสดงตรง <p> ก็จะอัพเดทตามไปด้วย

ตัวอย่างอื่น ๆ

Textarea

<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p> <br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>

Checkbox

<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>

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>

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>

จากตัวอย่างทั้งหมดนั้นจะเป็น input พื้นฐานที่เราจะใช้กันบน html ปกติ แต่หากเราสร้าง component ขึ้นมาใช้เอง เราก็สามารถทำ component นั้นให้รองรับ v-model เองได้เช่นกัน อ่านเพิ่มเติมได้ที่นี่

อ่านเพิ่มเติมเกี่ยวกับ v-model
Form Input Bindings — Vue.js