I’m trying to run this Reddit clone.
I imported different types of Vue CDNs,
<script src="https://unpkg.com/vue@next"></script>
Uncaught TypeError: Vue.component is not a function"
I’m not sure if I’m importing the wrong version of Vue, or if I have the wrong settings on jsfiddle.
var subreddit = Vue.component('subreddit',{ template: '#subreddit', props: ['name'], data: function () { return { posts: [] } }, created: function(){ this.$http.get("https://www.reddit.com/r/"+ this.name +"/top.json?limit=3") .then(function(resp){ this.posts=resp.data.data.children; }); } });
Full code here:
https://jsfiddle.net/jm0vs2kn/22/
Advertisement
Answer
Your script is pointing on the Vue version 3 @next
which has some breaking changes in global API, to work with Vue 2 use the following CDN :
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
You should also create a div inside the document body
like <body><div id="app"></div> ...
then mount the vue app like new Vue({el: '#app'});
Your x-templates should be defined outside the div
with id app
as follows :
<script type="text/x-template" id="subreddit"> <div class="subreddit"> <h2>{{ name | uppercase }}</h2> <ul class="item-list"> <li v-for="obj in posts"> <post :item="obj"></post> </li> </ul> </div> </script>
<div id="#app">
should be <div id="app">
and .then(function(resp){
should be an arrow function .then((resp)=>{
The example below uses axios
to make ajax calls.