วิธีแก้ไข การใช้งาน 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