[Django]-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>

by

130👍

You can use script tag in this way and it will work fine.
I was facing the same problem when I used <script></script> tag without specifying its type.
After using the type attribute Vue did not warn me for critical error:

<script type="application/javascript"> 
    // your code
</script>
👤Poode

39👍

I think the answer is in you question title. Just get rid of all the <script> tags in the template, put them outside of the template.

In this case you are using body as the template and you are putting scripts inside your template (body)

The easy solution is to change the el: 'body' to el: '#wrapper' and edit your html to

<body>
<div id="wrapper">
...
</div>
<script ... >
<script ... >
</body>
👤gurghet

18👍

Make sure you have a closing tag on your root element.
I just spent the last 6 hours systematically removing things and pulling my hair out. Turns out I had deleted my closing at some point and Vue was interpreting

👤innominata

15👍

a pair of mismatched tags (div, span) can cause this error.

<div id="app">
    <div>{{ a }} </span>
</div>
👤Rm558

6👍

It is because of script tag in your app scope. In my case it was because of google captcha that was in my scope. Google captcha iframe contains script tag

👤Hlib Liapota

3👍

VueJs doesn’t allow inside the app’s component. For Example,`

<body>
    <div id="vue-id">
        <!-- Ways of calling to templates-->
        <h2>{{ message }}</h2>
        <h2 v-text="message"></h2>
        <h3>{{ value * 5 }}</h3>
        <h3>{{ value }}</h3>

       <script></script>
    </div>    
</body>`

where is inside the same [ app’s component]
The right option is to include outside the app’s component`

<body>
    <div id="vue-id">
        <!-- Ways of calling to templates-->
        <h2>{{ message }}</h2>
        <h2 v-text="message"></h2>
        <h3>{{ value * 5 }}</h3>
        <h3>{{ value }}</h3>
    </div>
    <script></script>
</body>
👤Vkash Poudel

2👍

My suggestion is a little specific, as I’m using Vue JS v2 in conjunction with jQuery v3.

I’m using jQuery to load the instance of my application with something simple like this:

$(() => {

  new Vue({
    name: 'MyApp',
    el: '#app' // which is my main HTML element for my entire page app
  });

});

So, this won’t initiate until the entire document is loaded.

In my footer, I’m changing any offending script tags with this before the entire document is loaded, but after my closing main HTML tag:

$('main script:not([type="application/javascript"])').attr('type', 'application/javascript');

This did the trick for me without having to parse any output from offending tags and doing anything more extravagant.

This can be extrapolated out, using the native document selectors if you’re not using jQuery, like my example.

👤Erutan409

1👍

(Edit first check for mismatched/unclosed tags within your template, as others have said. Vue can be very picky with that)

Might be a simple as an explicit closure of the component’s tag:

Version: vue@2.6.11

Error there:


...body html...

<bme-form-projval
show_debug_elements="Y"
form_name="batchform"
>

...body html...

still there:


<bme-form-projval
show_debug_elements="Y"
form_name="batchform"
/>

Error solved:

<bme-form-projval
show_debug_elements="Y"
form_name="batchform"
>

</bme-form-projval>
👤JL Peyret

1👍

Ensure all HTML Tags in the page are opened and closed properly.

👤James Ikubi

1👍

Although changing "script" to "script type="application/javascript"" makes the warning disappeared, it causes the page not to finish loading. Therefore, it would not be a good idea to use it!

👤Habib Seifzadeh

0👍

This code generate this error too!

<!--[if lte IE 8]>
    <div>...</div>
<![endif]-->
👤Omar Arturo

0👍

In my case (using Laravel layout) the problem was that i put the footer containing the script inside the div i.e. id="app"

Changing the placement of it outside the div solved the issue.

👤Adeel Raza Azeemi

0👍

If you look at the end of the error it will tell you how many div's you have to close before the vue script

2247|  </script></div>
   |  ^^^^^^^^^^^^^^^2247|  </script></div>
   |  ^^^^^^^^^^^^^^^
👤Vincenzo

-1👍

Check your browser source code, maybe something else has been added to the framework you are using.
In my case, I did not remove the rails layout template.

👤David tsang

Leave a comment