I am new to VueJs. As a start, I am trying to create a page which on button click increases or decreases age. However, the age is not rendering on to the html. Given below are the reqd files:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue</title>
<script src="https://unpkg.com/vue#2.6.11/dist/vue.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="app">
<h1>Events</h1>
<button #click="add">Add a year</button>
<button #click="subtract">Subtract a year</button>
<p>{{ age }}</p>
</div>
<script src="app.js"></script>
</body>
</html>
app.js:
new Vue({
el: '#app',
data: {
age:22
},
methods: {
add: function(){
this.age++;
}
subtract: function(){
this.age--;
}
}
});
Any help is appreciated!
problem is missing comma symbol after add function :D .
Correct version of app.js as below :
new Vue({
el: '#app',
data: {
age:22
},
methods: {
add: function(){
this.age++;
},
subtract: function(){
this.age--;
}
}
});
Related
Im new to VueJS and trying to figure out how I would nest components or have sub components. I don't know if im very bad at googling but I couldn't really find a clear answer.
This is my script and html :
Vue.component('card', {
template: '<div class="card"></div>'
})
Vue.component('card-text', {
props: ['text-content'],
template: '{{ text-content }}'
})
new Vue({
el: '#app',
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script defer src="script.js"></script>
</head>
<body>
<div id="app">
<card>
<card-text text-content="Text to show"></card-text>
</card>
</div>
</body>
</html>
as you can see I have 2 components, card and card-text.
I want to display these like this :
<card>
<card-text text-content="text to show"></card-text>
</card>
You would need slots to do that. Just change your card component to:
Vue.component('card', {
template: '<div class="card"><slot></slot></div>'
})
To be able to render different stuff inside <card></card>
You can read more in the docs
If you want to nest card-text inside card, just do as follows:
Vue.component('card', {
template: '<div class="card"><card-text text-content="Text to show"></card-text></div>'
})
I'm trying to add the parameter "pokemonName" to the api url that's being fetched with axios. My goal is to display the JSON data for each new pokemon the that the user enters within an input text field.
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Pokemon Search</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app" class="container">
<div>{{ results }}</div><br />
Search: <input type="text" v-model.lazy="pokemonName" #change="getPokemon">
</div>
<script src="script.js"></script>
</body>
</html>
And here is my js:
new Vue({
el: '#app',
data() {
return {
results: [],
pokemonName: ""
}
this.$set(this.pokemonName)
},
methods: {
getPokemon() {
// await axios
fetch('https://pokeapi.co/api/v2/pokemon/' + this.pokemonName)
//.then(response => (this.results = response.data));
.then(response => response.json()).then(data => {
this.pokemonName = data;
})
.catch(function(error) {
console.log(ERROR);
})
}
},
mounted: function mounted() {
this.getPokemon()
}
});
Your code working correctly. Type a number to see the name. You need to set the results.
new Vue({
el: '#app',
data() {
return {
results: [],
pokemonName: ""
}
this.$set(this.pokemonName)
},
methods: {
getPokemon() {
// await axios
fetch('https://pokeapi.co/api/v2/pokemon/' + this.pokemonName)
//.then(response => (this.results = response.data));
.then(response => response.json()).then(data => {
this.results = data.name;
})
.catch(function(error) {
console.log(ERROR);
})
}
},
mounted: function mounted() {
this.getPokemon()
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Pokemon Search</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app" class="container">
<div>{{ results }}</div><br /> Search: <input type="text" v-model.lazy="pokemonName" #change="getPokemon">
</div>
</body>
</html>
I have this simple file and using http-server it does not work. Please help. NOTE that I have a proper <head> of the HTML page .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>VueTester</title>
</head>
<body>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!',
},
})
</script>
<div id="app">
<p>{{ message }}</p>
</div>
<script src="https://unpkg.com/vue"></script>
</body>
</html>
Ok if i understand you right, you just have a simple HTML-file and want to use vue in it.
In this case you just have to reorganize your code like this and it should work:
<html>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
new Vue({
el: '#app',
data: { message: 'Hello Vue.js!' }
})
</script>
If i missunderstood you just tell me and I try to edit it.
I am new in vue. i tried to render a vue component. but i got error.
i am not using vue-cli. i include a script https://cdn.jsdelivr.net/npm/vue
My html code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
VUE Study
</title>
<link href="stylee.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div class="container" id="head">
</div>
<script src="components/app.js"></script>
</body>
</html>
app.js
import Index from "./Index.vue"
new Vue({
el: '#head',
render: h => h(Index)
});
both app.js and Index.vue are in same folder.
Please healp me to solve this..
The error occurs because browser do not recognize import statement.
Since you are not using a bundler like webpack you can register the components using Vue.component(). This will eliminate the need to import components inside other modules.
Vue.component('Index', {
data() {
return {
value: 'Index component'
}
},
template: `<h2>{{ value }}</h2>`
})
new Vue({
el: '#head'
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
VUE Study
</title>
<link href="stylee.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div class="container" id="head">
<index />
</div>
<script src="components/app.js"></script>
</body>
</html>
This question already has answers here:
Why don't self-closing script elements work?
(12 answers)
Closed 5 years ago.
Here is my code and i seem to have done everything correctly.
what might be the problem as the output is only {{message}}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h1>{{message}}</h1>
</div>
<script src="https://vuejs.org/js/vue.js"/>
<script>
new Vue({
el: '#app',
data:{
message: "Yow"
},
mounted: function () {
console.log("Mounted")
}
});
</script>
</body>
</html>
and it just outputs {{message}}
Hey man you forgot to close ending script tag in vue.js script/api
You were rendering whole html part in script tag like you can see in console below :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h1>{{message}}</h1>
</div>
<script src="https://vuejs.org/js/vue.js"/>
</script>
<script>
console.log('hi');
var app = new Vue({
el: '#app',
data:{
message: 'yow'
},
mounted: function () {
console.log("Mounted")
}
});
</script>
</body>
And always inlude api/main/cdn link ahead of any operational js file