วิธีการ ค้นหาด้วยการใช้ watch โดย vue.js

Jquery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , Jquery ม Ajax

Moderators: mindphp, ผู้ดูแลกระดาน

bolue
PHP Super Member
PHP Super Member
Posts: 352
Joined: 04/06/2020 10:05 am

วิธีการ ค้นหาด้วยการใช้ watch โดย vue.js

Post by bolue »

วิธีการ ค้นหาด้วยการใช้ watch โดย vue.js เป็นการค้นหาแบบไม่ต้องมีการ คลิ๊กปุ่ม เพื่อความสะดวก และความรวดเร็วต่อการค้นหาข้อมูล โดยจะมีการใช้ css ของ vuetify เป็นการทำช่อง input ใช้เป็นส่วนของการจัดรูปแบบการแสดงผลเอกสาร HTML เพื่อเป็นการตกแต่งและออกแบบให้สวยงาม

ตรงนี้จะเป็นช่อง input หรือ search โดยจะตั้งชื่อ v-model ว่า search

Code: Select all

  
<v-text-field
   flat
   absolute
   append-icon="mdi-magnify"
   placeholder="ค้นหานักศึกษาฝึกงาน"
   solo
   v-model="search"
>
</v-text-field>
                    
Jquery & Ajax Knowledge-1.png
Jquery & Ajax Knowledge-1.png (90.73 KiB) Viewed 30 times

ตรงนี้จะเป็น code ที่อยู่ใน watch

Code: Select all

 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
    }
}
โดย ตัวแปร v-model ที่เราตั้งชื่อเมื่อกร้ ว่า search จะนำมาเป็น ชื่อ function พร้อมทั้งรับค่า value
ข้อมูลที่เราใช้สำหรับค้าหา จะแบ่งเป็น 2 ก้อน คือ this.dataCopy ข้อมูลทั้งหมด และ this.data ข้อมูลที่จะนำมาตัดค้นหาหรือ filter ได้
โดยสามารถเลือกได้ว่าจะหาข้อมูลจากอะไรบ้าง ในที่นี้ก็จะมี ชื่อ นามสกุล และ ชื่อเล่น


ผลลัพธ์
Jquery & Ajax Knowledge-2.png
Jquery & Ajax Knowledge-2.png (316.11 KiB) Viewed 30 times
Jquery & Ajax Knowledge-1.png


สามารถเรียนรู้เรื่องอื่นๆ เพิ่มเติมได้ที่
การ ติดตั้ง 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

  • Similar Topics
    Replies
    Views
    Last post

Return to “Jquery & Ajax Knowledge”

Who is online

Users browsing this forum: No registered users and 2 guests