Lynrch's avatar

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.

0 likes
7 replies
hendranucleo's avatar

What you mean by run this script? within vue component? inside script code block at vue component? please more details and provide some code.

Lynrch's avatar

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>
hendranucleo's avatar

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?

Lynrch's avatar
<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?

hendranucleo's avatar

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>
Lynrch's avatar

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>
hendranucleo's avatar

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.