code หน้า view
โค้ด: เลือกทั้งหมด
<template>
<v-app>
<v-btn
color="primary"
text
fab
dark
v-on="on"
@click="opensumone()"
>
<v-icon>mdi-file-chart</v-icon>
</v-btn>
<sumone ref="sum" />
</v-app>
</template>
<script>
import sumone from '../components/Reportsumone'
export default {
components: {
sumone,
},
data () {
return {
}
},
methods: {
opensumone () {
this.$refs.sum.open()
}
},
}
</script>
โค้ด: เลือกทั้งหมด
<template>
<v-dialog v-model="dialog" max-width="800px">
<v-card>
</v-card>
</v-dialog>
</template>
<script>
export default {
data() {
return {
dialog : false
}
},
methods: {
open() {
this.dialog = true
}
}
}
</script>
เริ่มที่หน้า components ตั้งชื่อหน้า components ว่า Reportsumone.vue
โค้ด: เลือกทั้งหมด
<v-dialog v-model="dialog" max-width="800px">
<v-card>
</v-card>
</v-dialog>
โค้ด: เลือกทั้งหมด
data() {
return {
dialog : false
}
}
โค้ด: เลือกทั้งหมด
methods: {
open() {
this.dialog = true
}
}
ต่อมาหน้า view นะคะ
โค้ด: เลือกทั้งหมด
import sumone from '../components/Reportsumone'
components: {
sumone,
},
โค้ด: เลือกทั้งหมด
<sumone ref="sum" />
โค้ด: เลือกทั้งหมด
methods: {
opensumone () {
this.$refs.sum.open()
}
},
*ตรงนี้จะคือการเรียก function ที่อยู่ใน components โดยใช้ชื่อ ref ในการเรียก ตามด้วย ชื่อ function ที่อยู่ในหน้า components "" this.$refs.sum.open() ""
โค้ด: เลือกทั้งหมด
<v-btn
color="primary"
text
fab
dark
v-on="on"
@click="opensumone()"
>
<v-icon>mdi-file-chart</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
วิธีการ ใช้งาน vuetify คู่กับ vue.js viewtopic.php?f=73&t=67917