เว็บบอร์ด PHP เว็บส่งเสริมการเรียนรู้ Hosting CRM ERP Server Programming ถาม-ตอบปัญหา

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

data () {
    return {
        dialog: false,
    }
  },
  

 methods: {
        open () {
               this.dialog = true
          }
     },

    <v-btn
      color="primary"
      text
      fab
      dark
      v-on="on"
     @click="open()"
    >
      <v-icon>>mdi-pencil</v-icon>
    </v-btn>

วิธีการ การเรียกใช้ methods โดย [url=https://www.mindphp.com/%E0%B8%84%E0%B8%B9%E0%B9%88%E0%B8%A1%E0%B8%B7%E0%B8%AD/73-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/5087-vue.html]vue.js[/url] เป็นการค้นหาแบบไม่ต้องมีการ คลิ๊กปุ่ม เพื่อความสะดวก และความรวดเร็วต่อการค้นหาข้อมูล โดยจะมีการใช้ [url=https://www.mindphp.com/%E0%B8%84%E0%B8%B9%E0%B9%88%E0%B8%A1%E0%B8%B7%E0%B8%AD/73-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/2193-css-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3.html]css[/url] ของ vuetify เป็นการทำปุ่ม button ใช้เป็นส่วนของการจัดรูปแบบการแสดงผลเอกสาร [url=https://www.mindphp.com/%E0%B8%84%E0%B8%B9%E0%B9%88%E0%B8%A1%E0%B8%B7%E0%B8%AD/73-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3/2026-html-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3.html]HTML[/url] เพื่อเป็นการตกแต่งและออกแบบให้สวยงาม

อันนี้คือ code ทั้งหมดนะคะ
[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>
[/code]

อันนี้เป็นการอธิบายแยกย่อยนะคะ
[code]
<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>
[/code]
เริ่มจากสร้าง dialog และตั้งชื่อ v-model ว่า dialog
[code]data () {
return {
dialog: false,
}
},
[/code]

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

[code] methods: {
open () {
this.dialog = true
}
},[/code]

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

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

ผลลัพธ์
[attachment=1]Jquery &amp; Ajax Knowledge-1.png[/attachment]

[attachment=0]Jquery &amp; Ajax Knowledge-2.png[/attachment]




สามารถเรียนรู้เรื่องอื่นๆ เพิ่มเติมได้ที่
การ ติดตั้ง vue.js https://www.mindphp.com/forums/viewtopic.php?f=78&t=67916
วิธีการ ค้นหาด้วยการใช้ watch โดย vue.js https://www.mindphp.com/forums/viewtopic.php?f=78&t=67908
วิธีการ การเรียกใช้ methods โดย vue.js https://www.mindphp.com/forums/viewtopic.php?f=78&t=67909
วิธีการ เรียนใช้ dialog จาก components โดย vue.js https://www.mindphp.com/forums/viewtopic.php?f=78&t=67910
วิธีการ ใช้ Grid ออกแบบเป็น responsive design โดย vuetify https://www.mindphp.com/forums/viewtopic.php?f=73&t=67912