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>
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 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--;
}
}
});
I am trying to draw a picture into a div to be able to make the drag effect later. It seems that the function that has to draw the image is not working right. Maybe someone has a hint why?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>canvas</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/utils/Draggable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/plugins/CSSPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>
<script src="main.js"></script>
</head>
<body>
<div id="myCanvas" width="600" height="400" style="border:1px solid #000000;">
<div id="imagen" class="mover"></div>
</div>
</body>
</html>
here the js code..
context.getContext("2d");
var movibles = $(".mover");
var myCanvas = document.getElementById("myCanvas");
make_base();
function make_base()
{
base_image = new Image();
base_image.src = 'img/image.jpg';
base_image.onload = function(){
context.drawImage(base_image, 0, 0);
}
}
Draggable.create("movibles" , {
type:"y",
bounds: document.getElementById("myCanvas"),
throwProps:true,
onClick: function() {
console.log("clicked");
},
onDragEnd:function() {
console.log("drag ended");
}
});
Much appreciated..
I am trying to render a component but I get the error: property or method
"joke" is not defined in is not defined on the instance but referenced during render. I am using the dad jokes api to get data via the axios http library. Here is my code:
var joke = Vue.component('joke', {
template: '#joke',
data() {
return {
jokes: []
};
},
created() {
axios
.get('https://icanhazdadjoke.com/search', {
headers: {
Accept: 'application/json'
},
params: {
limit: 30
}
})
.then(response => {
this.jokes = response.data.results;
});
}
});
new Vue({
el: '#main'
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue Dad JOkes</title>
<!--styles-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<!--scripts-->
<script src="https://unpkg.com/vue#2.1.10/dist/vue.js" charset="utf-8"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="main">
<joke></joke>
</div>
<template id="joke">
<ul>
<li v-for="joke in jokes"></li>
<p>{{joke.joke}}</p>
</ul>
</template>
<script src = "app.js" charset="utf-8"></script>
</body>
</html>
It's a simple issue with the html, you had ended the </li> before using {{joke}}
Change
<ul>
<li v-for="joke in jokes"></li>
<p>{{joke.joke}}</p>
</ul>
to
<ul>
<li v-for="joke in jokes">
<p>{{joke.joke}}</p>
</li>
</ul>
Here's your working example:
var joke = Vue.component('joke', {
template: '#joke',
data() {
return {
jokes: []
};
},
created() {
axios
.get('https://icanhazdadjoke.com/search', {
headers: {
Accept: 'application/json'
},
params: {
limit: 30
}
})
.then(response => {
this.jokes = response.data.results;
});
}
});
new Vue({
el: '#main'
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue Dad JOkes</title>
<!--styles-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<!--scripts-->
<script src="https://unpkg.com/vue#2.1.10/dist/vue.js" charset="utf-8"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="main">
<joke></joke>
</div>
<template id="joke">
<ul>
<li v-for="joke in jokes">
<p>{{joke.joke}}</p>
</li>
</ul>
</template>
<script src = "app.js" charset="utf-8"></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