Just starting out with Vue and attempting to fetch JSON data from a REST API called JSON placeholder. Encountering the error message:
"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?"
After receiving this error, I inspected index.js where Prijzen is included... here's the relevant code snippet:
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',
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
}
]
},
]
})
The above code seems fine regarding Prijzen. Now let's take a look at how the Prijzen component is structured:
<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've used {{ prijs }} in the template and also made mention of it in my main.js file where it is involved in an axios get request as shown below:
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))
}
})
})