[Fixed] Templates should only be responsible for mapping the state to the UI

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

Error Code

It is common to find yourself battling to fix an error like this, most especially when you are just starting out with vue or any other Javascript framework.

There is quite a couple of things that can trigger an error like this, In this page I am going to guide you through fixing this error.

Solution One: Check for tags you have not closed yet. <div>

Forgetting to close a tag I initially open is very common and its one of the top reasons many of us hit this error in the console.

<div></div>

Go through your code and be sure you have not left any tag unclosed.

Solution Two: Properly Import your Js Script

Another reason you might be facing this issue is that you are adding this script tag:

<script src="https://www.google.com/recaptcha/api.js?" async defer></script>

Inside the Vue root element (<div id="app">...</div>)

Vue disallows script tags inside the Vue managed elements

Move it outside the Vue’s root element.

Try placing it just before your app script tag on the bottom of your file:

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- ... -->
</head>
<body>
<div id="app">
    <!-- ... your vue app / no script tag allowed here ... -->
</div>

<script src="https://www.google.com/recaptcha/api.js?" async defer></script>
<script src="http://127.0.0.1:8000/js/app.js"></script>

</body>
</html>

Solution Three: Define Script type

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>

Solution four: Last Resort

If you have tried all of the above and nothing seems to be working, then run an update. chances are, one of your dependencies might be out of date and updating it might help you get back to code, but this is rarely the case for the above error.

Npm run update

2 Comments

Leave a Reply