I have a website that uses Vuejs. And a forum in Discourse. I am trying to insert a javascript in the template file that will connect comments from the forum to a specific page on Vuejs site. But I get the error:
Templates should only be responsible for mapping the state to the UI.
Avoid placing tags with side-effects in your templates, such as <script>,
as they will not be parsed.
My Detail.vue code:
<div id='discourse-comments'></div>
<script type="text/javascript">
DiscourseEmbed = { discourseUrl: 'https://forum.epicseven.ru/',
discourseEmbedUrl: '{{url absolute="true"}}' };
(function() {
var d = document.createElement('script'); d.type = 'text/javascript';
d.async = true;
d.src = DiscourseEmbed.discourseUrl + 'javascripts/embed.js';
(document.getElementsByTagName('head')[0] ||
document.getElementsByTagName('body')[0]).appendChild(d);
})();
</script>
I was try change text/javascript
to application/javascript
, but when i try render it, i receive error:
- invalid expression: missing ) after argument list in
" \n DiscourseEmbed = { discourseUrl: 'https://forum.epicseven.ru/',\n
discourseEmbedUrl: '"+_s(url absolute="true")+"' };\n\n (function() {\n
var d = document.createElement('script'); d.type =
'application/javascript'; d.async = true;\n d.src =
DiscourseEmbed.discourseUrl + 'javascripts/embed.js';\n
(document.getElementsByTagName('head')[0] ||
document.getElementsByTagName('body')[0]).appendChild(d);\n })();\n"
Raw expression: DiscourseEmbed = { discourseUrl:
'https://forum.epicseven.ru/',
discourseEmbedUrl: '{{url absolute="true"}}' };
(function() {
var d = document.createElement('script'); d.type =
'application/javascript'; d.async = true;
d.src = DiscourseEmbed.discourseUrl + 'javascripts/embed.js';
(document.getElementsByTagName('head')[0] ||
document.getElementsByTagName('body')[0]).appendChild(d);
})();
How i can fix this error? Maybe try to use different part of code?