My Vue and index.js are not working together - javascript

Why is my Vue and index.js import not working?
In my live server the text just shows up as {{ message }}
the html and js files are located in the same directory
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="UTF-8">
<title>Pomodoro Timer</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="app">
{{ message }}
</div>
</body>
</html>
<!-- Javascript -->
<script src="index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

Related

VueJS doesn't recognize my variable between curly braces

I'm moving my very first steps into VueJS but I'm already stuck.
I'm simply trying to display a variable, but even if the syntax look correct to me, I get
{{product}}
displayed instead of the actual product name. Here's the HTML:
<!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/vue#2.6.14/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>
And here's the JS:
const app = Vue.createApp({
data() {
return {
product: "socks",
};
},
});
Thank you!
You should use the CDN of version 3 since the syntax of Vue 3 :
<script src="https://unpkg.com/vue#3"></script>
<!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://unpkg.com/vue#3"></script>
</head>
<body>
<div id="app">
<h1>{{product}}</h1>
</div>
<!-- Import App -->
<script>
const app = Vue.createApp({
data() {
return {
product: "socks",
};
},
});
</script>
<!-- Mount App -->
<script>
const mountedApp = app.mount("#app");
</script>
</body>
</html>

VSCode not properly importing my main.js file

VScode is not importing my main.js file. I don't understand what I am doing wrong either. The index.html is right next to the main.js but it is not able to find it. I have imported many js files into html before so why is it breaking on me now? Does anyone have any idea's?
<!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 -->
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.14/dist/vue.js"></script>
<div id="app">
<h1>{{ product }}</h1>
</div>
<!-- Import Js -->
<script src="./main.js"></script>
<!--Mount App-->
<script>
const mountedApp = app.mount;
</script>
</body>
</html>
Here is the js file, I am not able to use it because it's not connecting to the html so there is it is just spiting out how Vue is not defined.
const app = Vue.createApp({
data() {
return{
product: 'Socks'
}
}
})
And the directory looks like this
Intro-to-Vue
-Assest
-Images
Socks.png
Index.html
main.js
Any help would be awesome. Thanks
You're using the vue 3 syntax with vue 2 CDN script :
<!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 -->
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.14/dist/vue.js"></script>
<div id="app">
<h1>{{ product }}</h1>
</div>
<!-- Import Js -->
<script src="./main.js"></script>
</body>
</html>
and main.js like :
new Vue({
el: '#app',
data() {
return {
product: 'Socks'
}
}
})

I work with vuejs mustache syntax don't work

I work with vuejs mustache syntax don't work
I work with vuejs mustache syntax don't work
<!DOCTYPE html>
<html>
<head>
<title>index</title>
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.14"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: "hello",
},
})
</script>
</head>
<body>
<div id="#app">
<h5>{{message}}</h5>
</div>
</body>
</html>
capture
It should be <div id="app"> not <div id="#app"> and the script that includes the vue instance should be at the end of body element :
<!DOCTYPE html>
<html>
<head>
<title>index</title>
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.14"></script>
</head>
<body>
<div id="app">
<h5>{{message}}</h5>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
message: "hello",
},
})
</script>
</body>
</html>

Veu is not defined

Im learning veu and I tried a basic setup but it shows {{name}} and there is veu is not defined in the console.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>VueJS Tutorial</title>
<link href="styles.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="vue-app">
<h1>{{ name }}</h1>
</div>
<script src="app.js" type="text/javascript"></script>
</body>
</html>
new Veu({
el: '#vue-app',
data: {
name: () => {
return "Shaun";
}
}
});
Its Vue not Veu.
new Vue({
el: '#vue-app',
data: {
name: () => {
return "Shaun";
}
}
});

Add new tags to vue-select

In the vue-select vuejs component, if you see on their demo page, you can select multiple items from the dropdown. However, if you type something that is not available in the dropdown, then you can just type that new text and press enter and it will become a tag. You can see this behavior here on their demo page:
https://sagalbot.github.io/vue-select/
However, I am unable to do this. I am able to select from the drop down, but if I type something new, then that doesn't become a tag. I have this jsbin showing what I've done. Any help is appreciated.
http://jsbin.com/xoxohenoli/edit?html,js,output
My Javascript:
Vue.component('v-select', VueSelect.VueSelect);
new Vue({
el: '#app',
data: function() {
return {
options: ["A","B"],
placeholder: 'Choose a country..',
}
},
});
My HTML:
<!DOCTYPE html>
<html>
<head>
<script src="http://unpkg.com/vue#2.1.10"></script>
<script src="http://unpkg.com/vue-select#2.0.0"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="app" class="container-fluid">
<h2>VueSelect Basic Example</h2>
<v-select :placeholder="placeholder"
multiple
:options="options"></v-select>
</div>
</body>
</html>
You need to add taggable attribute to the component please check in working example.
please use full page for snippet to avoid overlapping console output.
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/vue#2.1.10/dist/vue.js"></script>
<script src="https://unpkg.com/vue-select#2.0.0/dist/vue-select.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="app" class="container-fluid">
<h2>VueSelect Basic Example</h2>
<v-select taggable :placeholder="placeholder"
multiple
:options="options"></v-select>
</div>
<script>
Vue.component('v-select', VueSelect.VueSelect);
new Vue({
el: '#app',
data: function() {
return {
options: ["A","B"],
placeholder: 'Choose a country..',
}
},
});
</script>
</body>
</html>

Categories