title: Trying to make a VueJS API call with axios to get json in a component named prijzen
body: <p>I am new to Vue and am trying to load in json data from a REST API called JSON placeholder. I get the error:</p>
  
  <p>"Uncaught ReferenceError: Prijzen is not defined
      at eval (cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/views/layout/Prijzen.vue?vue&amp;type=script&amp;lang=js&amp;:16)
      at Module../node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/views/layout/Prijzen.vue?"</p>
  
  <p>So after i got this i tried looking at index.js but prijzen is added there.. the code looks like this:</p>
  
  <pre><code>import Vue from 'vue'
  import Router from 'vue-router'
  
  // Containers
  const TheContainer = () =&gt; import('@/containers/TheContainer')
  
  // Views
  const Dashboard = () =&gt; import('@/views/Dashboard')
  const Prijzen = () =&gt; import('@/views/layout/Prijzen')
  const Login = () =&gt; import('@/views/layout/Login')
  
  Vue.use(Router)
  
  export default new Router({
    mode: 'hash', // https://router.vuejs.org/api/#mode
    linkActiveClass: 'open active',
    scrollBehavior: () =&gt; ({ y: 0 }),
    routes: [
      {
        path: '/',
        redirect: '/dashboard',
        name: 'Home',
        component: TheContainer,
        children: [
          {
              path: 'dashboard',
              name: 'Dashboard',
              component: Dashboard
          },
          {
            path: '/login',
            name: 'Login',
            component: Login
          },
          {
            path: '/layout/prijzen',
            name: 'Prijzen',
            component: Prijzen
        }
        ]
      },
    ]
  })
  </code></pre>
  
  <p>So prijzen is fine here. At least it looks fine to me. This is how the prijzen component looks:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div id="Prijzen"&gt;
      {{ prijs }}
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import axios from 'axios';
  import PrijsItem from './PrijsItem.vue';
  
  export default {
    name: 'Prijzen',
    components: {
      PrijsItem
    },
    props: ["PrijsItem"]
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>I have used {{ prijs }} in the template and in my main.js file it is being mentioned with my axios get request as you can see here: </p>
  
  <pre><code>import 'core-js/stable'
  import Vue from 'vue'
  import CoreuiVue from '@coreui/vue/src'
  import App from './App'
  import router from './router/index'
  import { iconsSet as icons } from './assets/icons/icons.js'
  import store from './store'
  
  Vue.use(CoreuiVue)
  
  new Vue({
    el: '#app',
    router,
    store,
    //CIcon component documentation: https://coreui.io/vue/docs/components/icon
    icons,
    template: '&lt;App/&gt;',
    components: {
      App,
      Prijzen
    },
  
    new:({
      let: '#Prijzen',
      data () {
        return {
          prijs: null
        }
      },
      mounted () {
        axios
          .get('https://jsonplaceholder.typicode.com/posts')
          .then(response =&gt; (this.prijs = response))
      }
    })
  })
  </code></pre>