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>
Related
I followed this tutorial https://css-tricks.com/creating-vue-js-component-instances-programmatically/
My component :
const button = Vue.component('button', {
props: {
id: String,
color: String
},
data: function() {
return {
count: 0
}
},
template:
`
<div class="button">
{{ count }}
</div>
`
});
The html :
<html>
<head>
<title>Test</title>
</head>
<body>
<div id="app">
<main id="main" ref="container">
<span #click="add">Add</span>
</main>
</div>
</body>
<script src="vue.js"></script>
<script src="app.js"></script>
</html>
All is fine but at this step I get the error "instance is not a html node" How to make vue component as a html node ?
ComponentClass = Vue.extend(button)
instance = new ComponentClass()
this.$refs.container.appendChild(instance.$el)
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.
Why the following code failed to show the markdown-editor?
Why Failed to show markdown-editor using VueSimpleMDE by CDN?
<html>
<head>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
<link href="https://unpkg.com/simplemde#1.11.2/dist/simplemde.min.css" rel="stylesheet">
<script src="https://unpkg.com/simplemde#1.11.2/dist/simplemde.min.js"></script>
<script src="https://unpkg.com/vue-simplemde#0.4.6/dist/vue-simplemde.min.js"></script>
</head>
<body>
<script>
Vue.use(VueSimpleMDE);
</script>
<div id="vue-app">
{{ content }}
<markdown-editor v-model="content" ref="markdownEditor"></markdown-editor>
</div>
<script>
var vue = new Vue({ "el": "#vue-app", data: { content: "kdfljads" } });
</script>
</body>
</html>
I need some help. The input box doesn't seem to be appearing. I am not using app.js as it gives me problem with Buefy. Anything I did wrongly? Thanks.
<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css">
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<script src="{{ asset('js/vue2.4.2.js') }}"></script>
<script src="{{ asset('js/buefy0.4.6.js') }}"></script>
<script src="{{ asset('js/axios.min.js') }}"></script>
</head>
<body>
<div id="app">
<hr>
<div class="container">
<datepicker name="test" placeholder="European Format ('d-m-Y')" :config="{ dateFormat: 'd-m-Y', static: true }"></datepicker>
</div>
</div>
<script type="text/javascript">
Vue.use(Buefy.default)
var app = new Vue({
el: '#app',
components: {
'datepicker': DatePicker
},
data: {
name:'test'
},
methods: {
}
});
</script>
</body>
</html>
I think it should be:
components: {
'datepicker': Buefy.Datepicker
}
In the app.js file
import Buefy from 'buefy';
Vue.use(Buefy);
Do not use
Vue.use(Buefy.Default);