วิธีการ การเรียกใช้ methods โดย vue.js
Posted: 05/06/2020 1:17 pm
วิธีการ การเรียกใช้ methods โดย vue.js เป็นการค้นหาแบบไม่ต้องมีการ คลิ๊กปุ่ม เพื่อความสะดวก และความรวดเร็วต่อการค้นหาข้อมูล โดยจะมีการใช้ css ของ vuetify เป็นการทำปุ่ม button ใช้เป็นส่วนของการจัดรูปแบบการแสดงผลเอกสาร HTML เพื่อเป็นการตกแต่งและออกแบบให้สวยงาม
อันนี้คือ code ทั้งหมดนะคะ
อันนี้เป็นการอธิบายแยกย่อยนะคะ
เริ่มจากสร้าง dialog และตั้งชื่อ v-model ว่า dialog
ประกาศตัวแปร dialog เป็น false คือเรายังไม่ให้แสดงผลหรือทำงานนะคะ
ต่อไปสร้าง methods ตั้งชื่อ function ว่า open โดยเมื่อเรียกใช้ function ที่ชื่อ open จะให้ this.dialog = true หรือให้ dialog ที่เราสร้างไว้ ทำงานหรือแสดง
สร้าง button เพื่อทำการเรียกใช้ function ใน methods โดยจะใช้คำสั่งว่า @click แล้วตามด้วยชื่อ function
ผลลัพธ์
สามารถเรียนรู้เรื่องอื่นๆ เพิ่มเติมได้ที่
การ ติดตั้ง 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
อันนี้คือ code ทั้งหมดนะคะ
Code: Select all
<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: Select all
<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: Select all
data () {
return {
dialog: false,
}
},
Code: Select all
methods: {
open () {
this.dialog = true
}
},
Code: Select all
<v-btn
color="primary"
text
fab
dark
v-on="on"
@click="open()"
>
<v-icon>>mdi-pencil</v-icon>
</v-btn>
ผลลัพธ์
สามารถเรียนรู้เรื่องอื่นๆ เพิ่มเติมได้ที่
การ ติดตั้ง 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