Есть старый проект, который не очень хочется переписывать под новый лад в части рендеринга. Вчера поставил на него Vue router. Задача такая - API подгружает содержимое основного блока страницы в виде html и JS,
после загрузки содержимого нужно выполнить загруженный JS.
Тут для удобства пример, как я это сделал
https://jsfiddle.net/oxg5mjwe/
В примере через нативный JS с помощью eval я могу запустить загруженный JS, но как запустить его через Vue?
Проект большой переписывать его правильно через json и компоненты займет очень много времени, так что пока по факту использую старый рендеринг основного содержимого окна выдаваемый ROR на стороне сервера.
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div id="app">
<div v-html="rendered_data"></div>
<div id="novue">Без Vue</div>
</div>
<script>
const app = new Vue({
data: {rendered_data: "", error: []},
mounted: function() {this.load()},
methods: {
load: function() {
axios.get("https://fiddle.jshell.net/k1wrdjsg/1/show/")
.then(res => {
this.$root.rendered_data = res.data
//если строку ниже раскомментировать то работает
//document.getElementById('novue').innerHTML=res.data
eval(document.getElementById('code').innerHTML);
})
.catch(e => {
console.log(e)
this.error.push(e)
})
}
}
}).$mount('#app')
</script>
