Tag Archives: import

วิธีแก้ไข การใช้งาน vuejs 2 import external js (assets/js/main.js) ปุ่มซ่อนแสดงเมนู toggle แบบ responsive ไม่ทำงาน

มือใหม่หัดใช้ vuejs 2 ในการพัฒนาเว็บ แล้วมีการใช้งาน css theme เพื่อความสะดวกลดเวลาในการสร้างเอง ก็จะเจอปัญหา การ import external js (assets/js/main.js) เข้ามาใช้งานโดยตรง ผ่านไฟล์ index.html (กรณีไม่ได้ติดตั้งเข้าใน package.json) การใช้งานแบบนี้ก็จำเป็นต้องเอาไฟล์ที่จะใช้งานไป import ที่ไฟล์ public/index.html ปัญหาที่เกิดตามมา คือ เวลา build project เพื่อเอาไปใช้งานนั้น ลำดับการโหลด external js ก็ไม่เป็นไปตามลำดับที่เราต้องการ เนื่องจากก็จะมี js ที่ถูกสร้างจาก vuejs 2 อีกบางส่วนที่อาจจะส่งผลต่อการใช้งานทำให้ผลกระทบหลัก ๆ ที่ผิดพลาดคือ ปุ่ม ย่อขยายเมนู (toggle) เวลาการแสดงผลในอุปกรณ์ขนาดเล็ก หรือ หรือหน้าจอขนาดใหญ่ไม่ทำงาน responsive ไม่ทำงาน ตามปกติที่ควรจะซ่อนหรือแสดงเมนูได้ เทียบกับการเขียน css theme แบบไม่ผ่าน vuejs หรือการเขียนแบบเดิมที่ไม่ใช่ vuejs

กรณีหน้าจอขนาดใหญ่ ปุ่มนี้ไม่ทำงาน
กรณีหน้าจอขนาดเล็ก ปุ่มนี้ไม่ทำงาน

ผู้เขียนลองแก้ปัญหาด้วยการใส่ attribute ใน tag script สำหรับการ import external js เข้ามาช่วยให้มีการบังคับโหลด คือ

defer

ตัวอย่างการใช้งาน

<script src="external_js_file.js" defer></script>

ซึ่งจะเป็นการกำหนดให้มีการวิเคราะห์องค์ประกอบของหน้าเว็บหลังจากที่มีการโหลดหน้าเว็บเสร็จแล้ว วิธีการนี้จะช่วยให้ script การทำงานของ css theme ทำงานได้อย่างถูกต้องและแก้ไขปัญหาของเมนู responsive ไม่ทำงานได้

เพียงเท่านี้ก็สามารถใช้งาน menu responsive ได้ dropdown-toggle ก็สามารถใช้งานได้แล้วทั้งแบบหน้าเว็บปกติ และ หน้าเว็บแบบ responsive

Version ที่ทดลองแก้ไข

Vue 2.7.5 Admin theme ที่ใช้งาน assets/js/main.js

ตัวอย่างการวางที่ไฟล์ public/index.html

พอใส่ defer แล้วปุ่ม เมนูก็สามารถทำงานได้ตามปกติ เหมือนการเขียนแบบไม่ใช้ vuejs