尝试使用 axios 进行 VueJS API 调用以在名为 prijzen 的组件中获取 json

Question

I am new to Vue and am trying to load in json data from a REST API called JSON placeholder. I get the error:

"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&type=script&lang=js&: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?"

So after i got this i tried looking at index.js but prijzen is added there.. the code looks like this:

import Vue from 'vue'
import Router from 'vue-router'

// Containers
const TheContainer = () => import('@/containers/TheContainer')

// Views
const Dashboard = () => import('@/views/Dashboard')
const Prijzen = () => import('@/views/layout/Prijzen')
const Login = () => import('@/views/layout/Login')

Vue.use(Router)

export default new Router({
  mode: 'hash', // https://router.vuejs.org/api/#mode
  linkActiveClass: 'open active',
  scrollBehavior: () => ({ 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
      }
      ]
    },
  ]
})

So prijzen is fine here. At least it looks fine to me. This is how the prijzen component looks:

<template>
  <div id="Prijzen">
    {{ prijs }}
  </div>
</template>

<script>
import axios from 'axios';
import PrijsItem from './PrijsItem.vue';

export default {
  name: 'Prijzen',
  components: {
    PrijsItem
  },
  props: ["PrijsItem"]
}
</script>

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:

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: '<App/>',
  components: {
    App,
    Prijzen
  },

  new:({
    let: '#Prijzen',
    data () {
      return {
        prijs: null
      }
    },
    mounted () {
      axios
        .get('https://jsonplaceholder.typicode.com/posts')
        .then(response => (this.prijs = response))
    }
  })
})

Answer 1

Is the Prijzen.vue file definitely in the views/layout directory? That error looks like it might be caused by not being able to find the file where you've told it to look.

A different issue:

{{ prijs }}

Is in the template, but prijs is not defined. Also PrijsItem component has been imported but not used which will sometimes throw linting errors.