Vue: визуализировать тег <script>внутри переменной (строка данных)

Question

Я новичок в Vue.js

Я хочу отобразить тег сценария внутри переменной (строка данных).

Я попытался использовать директиву v-html, чтобы сделать это, но это не работает. Ничего не отображается

Как я могу достичь этого?

Answer 1

Я бы поместил директиву v-if в тег скрипта и поместил бы ее содержимое в переменную.

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

Answer 2

Если я вас правильно понимаю, мой ответ:

<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

Я думаю, что по безопасности vue ускользает от вашего <script> автоматически, и избежать этого невозможно.

В любом случае, одну вещь, которую вы можете сделать, это eval(this.property) на created() ловушке жизненного цикла.

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

Используйте его с осторожностью, как указано в vue js docs , это может открыть атаки XSS в вашем приложении