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

jQuery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , jQuery และ Ajax

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

ภาพประจำตัวสมาชิก
MBMoo
PHP VIP Members
PHP VIP Members
โพสต์: 25599
ลงทะเบียนเมื่อ: 04/06/2020 10:05 am

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

โพสต์ที่ยังไม่ได้อ่าน โดย MBMoo »

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

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

โค้ด: เลือกทั้งหมด

  
<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 2048 times

ตรงนี้จะเป็น 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
    }
}
โดย ตัวแปร 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 2048 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
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 70