Saya sudah menggunakan dua skrip eksternal untuk gateway pembayaran. Saat ini keduanya dimasukkan ke dalam index.html
file. Namun, saya tidak ingin memuat file-file ini di awal. Gateway pembayaran hanya diperlukan saat pengguna membuka komponen tertentu ( using router-view
).
Apakah ada cara untuk mencapai hal ini?
javascript
vue.js
vuejs2
vue-component
vue-router
Gijo Varghese
sumber
sumber
/public/index.html
untuk melakukannya?Jawaban:
Cara sederhana dan efektif untuk menyelesaikan ini, itu dengan menambahkan skrip eksternal Anda ke dalam vue
mounted()
komponen Anda. Saya akan mengilustrasikan Anda dengan skrip Google Recaptcha :Sumber: https://medium.com/@lassiuosukainen/how-to-include-a-script-tag-on-a-vue-component-fe10940af9e8
sumber
created()
metode tidak bisa mendapatkan dokumen, gunakanmounted()
sebagai gantinyarecaptchaScript.async = true
sebelum menambahkannya ke kepala.recaptchaScript.defer = true
mungkin juga cocok untuk seseorangSaya telah mengunduh beberapa templat HTML yang dilengkapi dengan file dan jquery js khusus. Saya harus melampirkan js itu ke aplikasi saya. dan lanjutkan dengan Vue.
Ditemukan plugin ini, ini adalah cara bersih untuk menambahkan skrip eksternal baik melalui CDN dan dari file statis https://www.npmjs.com/package/vue-plugin-load-script
sumber
menggunakan webpack dan vue loader Anda dapat melakukan sesuatu seperti ini
menunggu skrip eksternal untuk memuat sebelum membuat komponen, sehingga varsar dll tersedia dalam komponen
sumber
Apakah Anda menggunakan salah satu templat starter Webpack untuk vue ( https://github.com/vuejs-templates/webpack )? Sudah diatur dengan vue-loader ( https://github.com/vuejs/vue-loader ). Jika Anda tidak menggunakan template pemula, Anda harus mengatur webpack dan vue-loader.
Anda kemudian dapat
import
skrip Anda ke komponen (file tunggal) yang relevan. Sebelum itu, Anda harusexport
dari skrip apa yang Anda inginkan keimport
komponen Anda.Impor ES6:
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
- http://exploringjs.com/es6/ch_modules.html
~ Sunting ~
Anda dapat mengimpor dari pembungkus ini:
- https://github.com/matfish2/vue-stripe
- https://github.com/khoanguyen96/vue-paypal-checkout
sumber
Anda dapat menggunakan paket vue-head untuk menambahkan skrip, dan tag lain ke kepala komponen vue Anda.
Sesederhana:
Lihatlah tautan ini untuk lebih banyak contoh.
sumber
Jika Anda mencoba menyematkan skrip js eksternal ke templat komponen vue.js, ikuti di bawah ini:
Dan Vue menunjukkan kepada saya kesalahan ini:
Template seharusnya hanya bertanggung jawab untuk memetakan keadaan ke UI. Hindari menempatkan tag dengan efek samping di templat Anda, seperti, karena tidak akan diuraikan.
<script type="application/javascript" defer src="..."></script>
Anda mungkin memperhatikan
defer
atributnya. Jika Anda ingin mempelajari lebih lanjut tonton video ini oleh Kylesumber
Anda dapat memuat skrip yang Anda butuhkan dengan solusi berbasis janji:
Harap perhatikan bahwa
this.$root
ini sedikit hacky dan Anda harus menggunakan solusi vuex atau eventHub untuk acara global.Anda akan membuat hal di atas menjadi komponen dan menggunakannya di mana pun dibutuhkan, itu hanya akan memuat skrip saat digunakan.
sumber
Ini bisa dilakukan seperti ini.
sumber
Untuk menjaga kebersihan komponen, Anda dapat menggunakan mixin.
Pada komponen Anda mengimpor file mixin eksternal.
sumber
Jawaban atas tag buat di mount baik, tetapi memiliki beberapa masalah: Jika Anda mengubah tautan beberapa kali, itu akan mengulangi membuat tag berulang-ulang.
Jadi saya membuat skrip untuk menyelesaikan ini, dan Anda dapat menghapus tag jika mau.
Ini sangat sederhana, tetapi dapat menghemat waktu Anda untuk membuatnya sendiri.
Dan Anda dapat menggunakannya seperti ini:
sumber
Anda dapat menggunakan vue-loader dan kode komponen Anda di file mereka sendiri (Komponen file tunggal). Ini akan memungkinkan Anda untuk memasukkan skrip dan css berdasarkan komponen.
sumber
Solusi paling sederhana adalah dengan menambahkan skrip dalam
index.html
file vue-project Andaindex.html:
sumber