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";
}
}
});
Related
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>
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>
I am a fully beginner in VueJS and this is my first application. It is a Hello world app, but the code is not working ;(
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Learning VueJS</title>
</head>
<body>
<div id="app">
<p>{{ title }}</p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.0/vue.cjs.js"></script>
<script src="script.js"></script>
</body>
script.js
new Vue({
el: '#app',
data: {
title: 'Hello world!'.
}
});
Your data must be a function.
new Vue({
el: '#app',
data()
return {
title: 'Hello world!',
};
}
});
See docs: https://v2.vuejs.org/v2/guide/components.html#data-Must-Be-a-Function
You're using a CDN link that uses Vue 3 version with a code syntax that runs in Vue 2, since you're beginner you should change the CDN link to vue 2 :
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.11"></script>
let app = new Vue({
el: '#app',
data: {
title: 'Hello world!'
}
});
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.12"></script>
<div id="app">
<p>{{ title }}</p>
</div>
I cannot seem to able to get vue-axios to fetch, store and display data in browser. I tried this and getting undefined when getData button is clicked.
new Vue({
el: '#app',
data: {
dataReceived: '',
},
methods: {
getData() {
axios.get('https://min-api.cryptocompare.com/data/price?fsym=BTC&tsyms=USD')
.then(function(response) {
this.dataReceived = this.response;
console.log(this.dataReceived);
return this.dataReceived;
})
}
}
})
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script src="https://unpkg.com/vue#2.5.17/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<button #click="getData" type="button">getData</button>
<p>dataReceived: {{ dataReceived }}</p>
</div>
</body>
</html>
I would add to #boussadjrabrahim's excellent answer that you need to use a fat arrow notation inside your then callback to make sure that the this keyword is bound to your Vue instance. Otherwise your dataReceived will remain blank.
new Vue({
el: '#app',
data: {
dataReceived: '',
},
methods: {
getData() {
axios.get('https://min-api.cryptocompare.com/data/price?fsym=BTC&tsyms=USD')
.then((response) => {
this.dataReceived = response.data;
console.log(this.dataReceived);
return this.dataReceived;
})
}
}
})
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script src="https://unpkg.com/vue#2.5.17/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue-axios#2.1.4/dist/vue-axios.min.js"></script>
</head>
<body>
<div id="app">
<button #click="getData" type="button">getData</button>
<p>dataReceived: {{ dataReceived }}</p>
</div>
</body>
</html>
You're missing axios library so add it as follow :
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
Another thing to rectify is this.response change it to response.data
new Vue({
el: '#app',
data: {
dataReceived: '',
},
methods: {
getData() {
axios.get('https://min-api.cryptocompare.com/data/price?fsym=BTC&tsyms=USD')
.then((response)=> {
this.dataReceived = response.data;
console.log(this.dataReceived);
return this.dataReceived;
})
}
}
})
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script src="https://unpkg.com/vue#2.5.17/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue-axios#2.1.4/dist/vue-axios.min.js"></script>
</head>
<body>
<div id="app">
<button #click="getData" type="button">getData</button>
<p>dataReceived: {{ dataReceived }}</p>
</div>
</body>
</html>
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>