I have followed this site:
VueJS - Instances[
^] to create my own instance.
However, I got this error:
Errors compiling template:
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.
3 | <head>
4 | <title>VueJs Instance</title>
5 | <script type="text/javascript" src="js/vue.js"></script>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
6 | </head>
| ^^^^^^^^^^^
7 | <body>
| ^^^^^^^^^^
8 | <div id="vue_det">
| ^^^^^^^^^^^^^^^^^^^^^^^^^^
9 | <h1>First name: {{firstname}}</h1>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
10 | <h1>Last name: {{lastname}}</h1>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
11 | <h1>{{mydetails}}</h1>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
12 | </div>
| ^^^^^^^^^^^^^^
13 | <script type="text/javascript" src="../instances/vue_instance.js"></script>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
14 | </body>
| ^^^^^^^^^^^
15 | </div>
| ^^^^^^
What have I done wrongly? How can I fix it?
What I have tried:
my template in the .vue component file:
<template>
<div class="home">
<head>
<title>VueJs Instance</title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="vue_det">
<h1>First name: {{firstname}}</h1>
<h1>Last name: {{lastname}}</h1>
<h1>{{mydetails}}</h1>
</div>
<script type="text/javascript" src="../instances/vue_instance.js"></script>
</body>
</div>
And this is my instance script (vue_instance.js):
var vm = new Vue({
el='#vue_det',
data: {
firstname: "James",
lastname: "Bond",
address: "007"
},
methods: {
mydetails: function () {
return this.lastname+ ", " + this.firstname + " " + this.lastname;
}
}
})
I am using VIsual Studio 2022.
Submit an article or tip