Попытка сделать VueJS вызов API с помощью ax ios, чтобы получить json в компоненте с именем prijzen - PullRequest
Новая
       6

Попытка сделать VueJS вызов API с помощью ax ios, чтобы получить json в компоненте с именем prijzen

0 голосов
/ 18 марта 2020

Я новичок в Vue и пытаюсь загрузить в json данные из REST API с именем JSON заполнитель. Я получаю сообщение об ошибке:

"Uncaught ReferenceError: Prijzen не определен в 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) в модуле ../ node_modules / cache-loader / dist / cjs. js?! ./ node_modules / babel-loader / lib / index. js! ./ node_modules / кэш-погрузчик / DIST / cjs. js?! ./ node_modules / vue -loader / Lib / индекс. js?! ./ SRC / просмотров /layout/Prijzen.vue?"

Так что после того, как я получил это, я попытался просмотреть индекс. 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: 

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

Я использовал {{pri js}} в шаблоне, а в моем основном. js файле он упоминается с моим топором ios получить запрос, как вы можете увидеть здесь: 

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

1 Ответ

0 голосов
/ 18 марта 2020

Является ли файл Prijzen. vue определенно в каталоге views / layout? Похоже, что эта ошибка может быть вызвана невозможностью найти файл, в котором вы указали, что искать.

Другая проблема: 

{{ prijs }}

В шаблоне, но pri js не определено. Кроме того, компонент PrijsItem был импортирован, но не использовался, что иногда приводит к ошибкам линтинга.

...