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

Question

我是Vue的新手，正在尝试从称为JSON占位符的REST API加载JSON数据。我收到错误：

“ Uncaught ReferenceError：未定义Prijzen在评估时（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）在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？“

所以，在我得到这个之后，我尝试查看index.js，但是在其中添加了prijzen。代码看起来像这样：

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
      }
      ]
    },
  ]
})

所以prijzen很好。至少对我来说看起来不错。 prijzen组件的外观如下：

<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>

我已经在模板中使用了{{prijs}}，在我的main.js文件中，我的axios get请求中也提到了它，如您所见：

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

Prijzen.vue文件是否确实在views / layout目录中？该错误看起来可能是由于无法在告诉其位置的位置找到文件引起的。

另一个问题：

{{ prijs }}

位于模板中，但未定义prijs。还导入了PrijsItem组件，但未使用它，有时会抛出掉毛错误。