ตรงนี้จะเป็นช่อง input หรือ search โดยจะตั้งชื่อ v-model ว่า search
โค้ด: เลือกทั้งหมด
<v-text-field
flat
absolute
append-icon="mdi-magnify"
placeholder="ค้นหานักศึกษาฝึกงาน"
solo
v-model="search"
>
</v-text-field>
ตรงนี้จะเป็น code ที่อยู่ใน watch
โค้ด: เลือกทั้งหมด
watch: {
search (value) {
this.data= this.dataCopy
var searchArray = this.data.filter(data => {
return (
data.fname.includes(value) ||
data.lname.includes(value) ||
data.nickname.includes(value)
)
})
this.data = searchArray
}
}
ข้อมูลที่เราใช้สำหรับค้าหา จะแบ่งเป็น 2 ก้อน คือ this.dataCopy ข้อมูลทั้งหมด และ this.data ข้อมูลที่จะนำมาตัดค้นหาหรือ filter ได้
โดยสามารถเลือกได้ว่าจะหาข้อมูลจากอะไรบ้าง ในที่นี้ก็จะมี ชื่อ นามสกุล และ ชื่อเล่น
ผลลัพธ์
สามารถเรียนรู้เรื่องอื่นๆ เพิ่มเติมได้ที่
การ ติดตั้ง vue.js viewtopic.php?f=78&t=67916
วิธีการ ค้นหาด้วยการใช้ watch โดย vue.js viewtopic.php?f=78&t=67908
วิธีการ การเรียกใช้ methods viewtopic.php?f=78&t=67909
วิธีการ เรียนใช้ dialog จาก components โดย vue.js viewtopic.php?f=78&t=67910
วิธีการ ใช้ Grid ออกแบบเป็น responsive design โดย vuetify viewtopic.php?f=73&t=67912