I recently started learning VueJS and I've hit a roadblock. My goal is to display a variable, but for some reason, instead of seeing the product name, all I get is
{{product}}
Here's the HTML code I'm using:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Vue Mastery</title>
<!-- Import Styles -->
<link rel="stylesheet" href="./assets/styles.css" />
<!-- Import Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7402011134465a425a4540">[email protected]</a>/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{product}}</h1>
</div>
<!-- Import App -->
<script src="./main.js"></script>
<!-- Mount App -->
<script>
const mountedApp = app.mount("#app");
</script>
</body>
</html>
Additionally, here's the JavaScript code I'm working with:
const app = Vue.createApp({
data() {
return {
product: "socks",
};
},
});
Any help would be greatly appreciated!