What you mean by run this script? within vue component? inside script code block at vue component? please more details and provide some code.
How to run file script in v-html
Hello, I try using v-html to render some HTML and include javascript<script src="file.js"></script>.
How can i run this script.
Thanks alot.
oh i have something like that in vue component. Script in content html so using v-html to render but script is not runing
<div v-html="content"></div>
<script>
export default {
data() {
return {
content:'<p>sometext</p><script src="file.js"></script><p>sometext</p>'
}
},
}
</script>
I never putting script in this way honestly, but who knows.
<script :src="file.js"></script> ? an : before src="file.js" so it was threaten as v-bind?
Anyway, if it was static script src, why you bother to use dataas script source, not directly inside your html block?
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:inline-block;width:300px;height:250px"
data-ad-client="xxxx"
data-ad-slot="xxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
So if you have some advertise script like google adsense get in database and the best way to bind it in vue component?
Within html block in your component just add <script :src="dataSource"></script>'. WheredataSourceis yourdata object key`.
<template>
<div>
<script async :src="dataSource"></script>
</div>
</template>
<script>
export default {
data() {
return {
dataSrc: ''
}
},
mounted() {
// block after response from db providing script source data
this.dataSrc = res.data.jsSource // explanation purpose, dont take it seriously
}
}
<script>
I mean data response like that so we have tag script and tag ins in data
res.data.jsSource='<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:inline-block;width:300px;height:250px"
data-ad-client="xxxx"
data-ad-slot="xxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>'
and i try it but script is not running
<template>
<div v-html="dataSource">
</div>
</template>
Put empty script tag with id or class then.
HTML Tag, using Vue Component or Native HTML
<script id="ads"></script>
JS Code
// Some code after server response
// Native Javascript
document.addEventListener('DOMContentLoaded', function () {
const b = document.querySelector('#ads');
b.insertAdjacentHTML('afterbegin', `alert('yes')`)
});
// With jQuery
$(document).ready(function () {
$('#ads').html('alert("yes")')
});
Link for insertAdjacentHTML from MDN.
Please or to participate in this conversation.