วิธีการ การเรียกใช้ methods โดย vue.js

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

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

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

วิธีการ การเรียกใช้ methods โดย vue.js

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

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

อันนี้คือ code ทั้งหมดนะคะ

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

<template>
  <v-app>
     <v-btn
       color="primary"
       text
       fab
      dark
      v-on="on"
     @click="open()"
    >
     <v-icon>>mdi-pencil</v-icon>
    </v-btn>
    
     <v-dialog v-model="dialog" max-width="500px">
        <v-card>
          <v-card-text>
              <v-layout justify-center>
                  <p class="pt-10">นักศึกษาฝึกงานได้ทำการผ่านการฝึกงานที่บริษิท INET</p>
              </v-layout>
              <v-layout justify-center>
                   <v-btn text class="teal--text" >ตกลง</v-btn>
               </v-layout>
           </v-card-text>
        </v-card>
     </v-dialog>
  </v-app>
</template>

<script>
export default {
  data () {
    return {
        dialog: false,
    }
  },
  methods: {
        open () {
               this.dialog = true
          }
     },
  
}
</script>
อันนี้เป็นการอธิบายแยกย่อยนะคะ

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

     <v-dialog v-model="dialog" max-width="500px">
        <v-card>
          <v-card-text>
              <v-layout justify-center>
                  <p class="pt-10">นักศึกษาฝึกงานได้ทำการผ่านการฝึกงานที่บริษิท INET</p>
              </v-layout>
              <v-layout justify-center>
                   <v-btn text class="teal--text" >ตกลง</v-btn>
               </v-layout>
           </v-card-text>
        </v-card>
     </v-dialog>
เริ่มจากสร้าง dialog และตั้งชื่อ v-model ว่า dialog

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

data () {
    return {
        dialog: false,
    }
  },
  
ประกาศตัวแปร dialog เป็น false คือเรายังไม่ให้แสดงผลหรือทำงานนะคะ

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

 methods: {
        open () {
               this.dialog = true
          }
     },
ต่อไปสร้าง methods ตั้งชื่อ function ว่า open โดยเมื่อเรียกใช้ function ที่ชื่อ open จะให้ this.dialog = true หรือให้ dialog ที่เราสร้างไว้ ทำงานหรือแสดง

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

    <v-btn
      color="primary"
      text
      fab
      dark
      v-on="on"
     @click="open()"
    >
      <v-icon>>mdi-pencil</v-icon>
    </v-btn>
สร้าง button เพื่อทำการเรียกใช้ function ใน methods โดยจะใช้คำสั่งว่า @click แล้วตามด้วยชื่อ function

ผลลัพธ์
Jquery & Ajax Knowledge-1.png
Jquery & Ajax Knowledge-1.png (323 ไบต์) Viewed 2259 times
Jquery & Ajax Knowledge-2.png
Jquery & Ajax Knowledge-2.png (32.74 KiB) Viewed 2259 times



สามารถเรียนรู้เรื่องอื่นๆ เพิ่มเติมได้ที่
การ ติดตั้ง vue.js viewtopic.php?f=78&t=67916
วิธีการ ค้นหาด้วยการใช้ watch โดย vue.js viewtopic.php?f=78&t=67908
วิธีการ การเรียกใช้ methods โดย vue.js 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

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

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