วิธีการ เรียนใช้ dialog จาก components โดย vue.js

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

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

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

วิธีการ เรียนใช้ dialog จาก components โดย vue.js

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

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

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>
code หน้า components

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

<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>
สร้าง dialog ในหน้า components แล้วทำการตั้งชื่อ v-model

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

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

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

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

ต่อมาหน้า view นะคะ

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

import sumone from '../components/Reportsumone'
  components: {
    sumone,
  },
ทำการ import หน้า components ที่เราต้องการมาแสดงผลในหน้า view และทำการตั้งชื่อ

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

  <sumone ref="sum" />
และเอาไปใส่ไว้ที่ในหน้า app พร้อมทั้งตั้งชื่อ ref ให้

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

methods: {
        opensumone () {
      this.$refs.sum.open()
    }
  },
หลังจากนั้นทำการสร้าง methods ตั้งชื่อ function ว่า opensumone

*ตรงนี้จะคือการเรียก 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>
ทำการสร้าง ปุ่มเพื่อที่จะ @click หรือ เรียกใช้ function ที่ชื่อว่า opensumone() ให้ทำงาน

ผลลัพธ์ :
Jquery & Ajax Knowledge-1.png
Jquery & Ajax Knowledge-1.png (531 ไบต์) Viewed 2477 times
Jquery & Ajax Knowledge-2.png

สามารถเรียนรู้เรื่องอื่นๆ เพิ่มเติมได้ที่
การ ติดตั้ง 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
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

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

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