Vue: render – zero298 Oct 17 '18 at 14:21

Answer 1

I'd place a v-if directive on the script tag and put the content of it in a variable.

<script v-if="script">
  {{script}}
</scrip>

Answer 2

If I understand you correctly, my answer is:

<template>
  <div>
    {{ strWithScriptTag }}
  </div>
</template>

<script>
export default {
   name: 'Example',

   methods: {
     htmlDecode(input) {
       const e = document.createElement('div')
       e.innerHTML = input
       return e.childNodes[0].nodeValue
     },
   },


  computed: {
     strWithScriptTag() {
       const scriptStr = '&lt;script&gt;https://some.domain.namet&lt;/script&gt;'
       return this.htmlDecode(scriptStr)
     }
   },
}
</script>

Answer 3

I think that by safety vue is escaping your <script> automatically and there is no way to avoid this.

Anyway, one thing you can do is eval(this.property) on created() lifecycle hook.

data: {
  script: 'alert("this alert will be shown when the component is created")'
},
created() {
  eval(this.script)
}

Use it with caution, as stated in vue js docs, this may open XSS attacks in your app