CODEWITHSUNDEEP
javascriptvue.js
Djavanus Alex
Djavanus Alex

Reputation: 31

Showing ADS in vuejs el

As we know, if we put <script> tag in the "el" vuejs, there will showing an error.. It's make me can't put any ads in vue el

For example:

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="app">
{{ message }}
<script data-cfasync='false' type='text/javascript' src='//p31898.clksite.com/adServe/banners?tid=31898_118905_0'></script>
</div>

  • Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as , as they will not be parsed.

so is it impossible to put Ads in Vue el?

Upvotes: 3

Views: 2446

Answers (3)

Dynomike
Dynomike

Reputation: 161

I just built a vue component that can load 's

I've used it to load ads from various companies like Chitika, Medianet, Propeller

Here's the repo:

https://github.com/TheDynomike/vue-script-component

Here's how to use it:

<template>
    <div>
        <VueScriptComponent script='<script type="text/javascript"> alert("Peekaboo!"); </script>'/>
    <div>
</template>

<script>
import VueScriptComponent from 'vue-script-component'

export default {
  ...
  components: {
    ...
    VueScriptComponent
  }
  ...
}
</script>

Upvotes: 1

DeVoresyah
DeVoresyah

Reputation: 86

I think it's impossible sir, but I've an alternative that maybe can help you need to split your html elements.

First, use Vue.js for compiling data (like from database)

<div id="app">
  {{ data }}
</div>

then create html element for showing your Ads

<div id="ads-example">
  <script data-cfasync='false' type='text/javascript' src='//p31898.clksite.com/adServe/banners?tid=31898_118905_0'></script>
</div>

and, the last create html element again for another Vue el after ads element. I hope it can help you :)

Upvotes: 0

IzumiSy
IzumiSy

Reputation: 1528

That's impossible, because el option is used to specify the DOM to get compiled with Vue.js component. That's why your error says Templates should only be responsible for mapping the state to the UI. The job Vue.js compiler does is only mapping the things like data, computed methods, or things like them into your mounted component.

Only the way you can do is not including <script> tag within your target element.

<div>
  <div id="app">
    {{ message }}
  </div>
  <script data-cfasync='false' type='text/javascript' src='//p31898.clksite.com/adServe/banners?tid=31898_118905_0'></script>
</div>

Upvotes: 0

Related Questions