Je dois utiliser deux scripts externes pour les passerelles de paiement. À l'heure actuelle, les deux sont placés dans le index.html
fichier. Cependant, je ne veux pas charger ces fichiers au début même. La passerelle de paiement est nécessaire uniquement lorsque l'utilisateur ouvre un composant spécifique ( using router-view
).
Y'a-t-il une quelconque façon de réussir cela?
javascript
vue.js
vuejs2
vue-component
vue-router
Gijo Varghese
la source
la source
/public/index.html
pour le faire?Réponses:
Un moyen simple et efficace de résoudre cela, c'est en ajoutant votre script externe dans la vue
mounted()
de votre composant. Je vais vous illustrer avec le script Google Recaptcha :Source: https://medium.com/@lassiuosukainen/how-to-include-a-script-tag-on-a-vue-component-fe10940af9e8
la source
created()
méthode ne peut pas obtenir le document, utilisez à lamounted()
placerecaptchaScript.async = true
avant de l'ajouter à la tête.recaptchaScript.defer = true
peut également convenir à quelqu'unJ'ai téléchargé un modèle HTML fourni avec des fichiers js et jquery personnalisés. J'ai dû attacher ces js à mon application. et continuez avec Vue.
J'ai trouvé ce plugin, c'est un moyen propre d'ajouter des scripts externes à la fois via CDN et à partir de fichiers statiques https://www.npmjs.com/package/vue-plugin-load-script
la source
en utilisant webpack et vue loader, vous pouvez faire quelque chose comme ça
il attend que le script externe se charge avant de créer le composant, donc globar vars etc sont disponibles dans le composant
la source
Utilisez-vous l'un des modèles de démarrage Webpack pour vue ( https://github.com/vuejs-templates/webpack )? Il est déjà configuré avec vue-loader ( https://github.com/vuejs/vue-loader ). Si vous n'utilisez pas de modèle de démarrage, vous devez configurer webpack et vue-loader.
Vous pouvez ensuite
import
vos scripts vers les composants pertinents (fichier unique). Avant cela, vous devezexport
de vos scripts ce que vous voulezimport
à vos composants.Importation ES6:
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
- http://exploringjs.com/es6/ch_modules.html
~ Modifier ~
Vous pouvez importer à partir de ces wrappers:
- https://github.com/matfish2/vue-stripe
- https://github.com/khoanguyen96/vue-paypal-checkout
la source
Vous pouvez utiliser le package vue-head pour ajouter des scripts et d'autres balises à la tête de votre composant vue.
C'est aussi simple que:
Consultez ce lien pour plus d'exemples.
la source
Si vous essayez d'incorporer des scripts js externes au modèle de composant vue.js, procédez comme suit:
Et Vue m'a montré cette erreur:
Les modèles ne doivent être responsables que du mappage de l'état à l'interface utilisateur. Évitez de placer des balises avec des effets secondaires dans vos modèles, par exemple, car elles ne seront pas analysées.
<script type="application/javascript" defer src="..."></script>
Vous remarquerez peut-être l'
defer
attribut. Si vous voulez en savoir plus, regardez cette vidéo de Kylela source
Vous pouvez charger le script dont vous avez besoin avec une solution basée sur des promesses:
Veuillez noter que
this.$root
c'est un peu piraté et que vous devriez plutôt utiliser une solution vuex ou eventHub pour les événements globaux.Vous feriez de ce qui précède un composant et l'utiliseriez là où c'est nécessaire, il ne chargera le script que lorsqu'il est utilisé.
la source
Cela peut être fait simplement comme ceci.
la source
Pour garder les composants propres, vous pouvez utiliser des mixins.
Sur votre composant, importez un fichier mixin externe.
la source
La réponse principale de créer une balise dans le montage est bonne, mais cela pose quelques problèmes: si vous modifiez votre lien plusieurs fois, il répétera la création de la balise encore et encore.
J'ai donc créé un script pour résoudre ce problème, et vous pouvez supprimer la balise si vous le souhaitez.
C'est très simple, mais cela peut vous faire gagner du temps pour le créer vous-même.
Et vous pouvez l'utiliser comme ceci:
la source
Vous pouvez utiliser vue-loader et coder vos composants dans leurs propres fichiers (composants à fichier unique). Cela vous permettra d'inclure des scripts et des css par composant.
la source
La solution la plus simple est d'ajouter le script dans le
index.html
fichier de votre vue-projectindex.html:
la source