Vue.js เริ่มต้น ตอน9 (List Rendering v-for)

ในบทความนี้เราจะมาเรียนรู้การวนลูปแสดงข้อมูลในลักษณะ List ซึ่ง Vue ก็มีเครื่องมือมาให้เราใช้งานได้อย่างง่ายดาย ก็คือ v-for มันสามารถใช้งานได้ทั้ง Array และ Object มาดูตัวอย่างแรกกันเลย

v-for กับข้อมูล Array

Template:

Data:

จะได้ผลลัพธ์

ในตัวอย่างเราจะใช้ v-for="item in items" ลูปแสดงผลข้อมูลที่อยู่ใน items ได้เลย

นอกจากนี้เรายังสามารถดึงค่า index ของข้อมูลในแต่ละ item ออกมาได้โดยเขียนตามตัวอย่างนี้

Template:

Data:

ผลลัพธ์

v-for กับข้อมูล Object

v-for สามารถใช่กับ Object ได้ด้วยเหมือนกัน โดยมีรูปแบบการใช้งานดังตัวอย่างนี้

Template:

Data:

ผลลัพธ์

และยังสามารถดึงข้อมูลของ Key ในแต่ละ item ออกมาได้อีกด้วย ดังตัวอย่าง

หรือ Index ของแต่ละ key ก็ยังสามารถดึงออกมาได้ ตามนตัวอย่างนี้

เรื่องของ Key กับ v-for

เมื่อคุณใช้งาน v-for แล้วเมื่อข้อมูลมีการเปลี่ยนแปลงลําดับใหม่ v-for จะใช้การแทนที่ของข้อมูลแทนการย้าย Dom อาจทําให้ข้อมูลอาจจะแสดงผิดพลาด เช่นข้อมูลแสดงซํ้า สิ่งที่ควรทําคือการกําหนด Key ที่ไม่ซํ้ากัน ให้กับ HTML ในแต่ละ Item เพื่อให้ Vue แยกแยะแต่ละ node ได้

มาดูตัวอย่างการใช้ Key กันครับ

Array Change Detection

ในกรณีที่ใช้ v-for กับ Array เราจะมาดูกันว่า การเปลี่ยนแปลงใดบ้างที่จะทําให้ v-for Render Component บ้าง

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()

v-for จะไม่ Render component ใหม่ในกรณีดังต่อไปนี้

  • แก้ไขข้อมูลในบาง item เช่น items[indexOfItem] = newValue
  • เปลี่ยนขนาดของ Array เช่น items.length = newLength

ตามตัวอย่างนี้

แต่เราสามารถทําแบบนี้เพื่อให้ข้อมูลอัพเดทได้

หรือ

หรือ

หรือเปลี่ยนขนาดได้โดย

Object Change Detection Caveats

ในส่วนของ Object Vue จะไม่ Detect ในกรณีที่เราเพิ่ม Key ของ Object เข้าไปตรงๆ ตามตัวอย่างนี้

แต่เรายังสามารถเพิ่มได้ด้วยการใช้ set ตามตัวอย่างนี้

หรือ

Displaying Filtered/Sorted Results

ในบางครั้งเราต้องการแสดงผลของ List แบบเรียงลําดับ หรือมีการ Filter ข้อมูล แต่ไม่ต้องการเปลี่ยน Original Data เราสามารถใช้ Computed มาช่วยได้ตามตัวอย่างนี้

Template:

script:

v-for with a Range

เราสามารถกําหนดจํานวนการวนลูปแบบนี้ได้ครับ

ผลลัพธ์

v-for with v-if

ถ้าในบางกรณีที่เราต้องการแสดงแค่บาง item เท่านั้น เราสามารถใส่เงื่อนไขเข้าไปได้เช่น

มาถึงตอนนี้เราสามารถใช้งาน v-for ในรูแปบต่างๆกันไปแล้ว ทั้งในเรื่องของการใช้ v-for กับ Array หรือใช้ กับ Object และเงื่อนไขของการ Update ในแบบต่างๆ หวังว่าเพื่อนๆจะสามารถนําไปประยุกต์ใช้งานได้ไม่ยากครับ

Comments