Получение данных Axios в Laravel / Vue

Question

У меня проблема с получением данных.Эта ошибка появляется в консоли ...

Uncaught Ошибка: сборка модуля не удалась (из ./node_modules/babel-loader/lib/index.js): SyntaxError: / var / www /html / laravel / resources / js / components / Content.vue: const - зарезервированное слово (8: 4)

я что-то не так делаю в использовании?

<template>

</template>

<script>
  export default {

    const axios = require('axios');

    axios.get('/ajax')
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      })
      .then(function () {
    });

}
</script>

также в App.js

require('./bootstrap');

window.Vue = require('vue');


// Vue.component('example-component', require('./components/ExampleComponent.vue').default);
Vue.component('content-wrap', require('./components/Content.vue').default);


const app = new Vue({
    el: '#app'
});

Answer 1

Хорошо, сначала ваш синтаксис неправильный export default {} экспортирует объект, но ваш синтаксис неправильный.

Синтаксис объекта key: value разделен ,

Пример:

import axios from 'axios';

export default {
  created(){
    axios.get('/ajax')
    .then(function (response) {
      console.log(response);
    })
    .catch(function (error) {
      console.log(error);
    })
    .then(function () {
    });
  }
}

PS Я думаю, что понимание модулей es6 было бы полезно для вас, поэтому вот ссылка: https://www.sitepoint.com/understanding-es6-modules/

Answer 2

Вы используете Laravel, поэтому axios уже включен (посмотрите в файл require('/bootstrap')).В вашем компоненте ваш export default{} неправильный.это объект, поэтому относитесь к нему как к одному:

export default {
  created(){
    axios.get('/ajax')
    .then(function (response) {
      console.log(response);
    })
    .catch(function (error) {
      console.log(error);
    })
    .then(function () {
    });
  }
}

Answer 3

@ Барби попробуйте добавить .babelrc файл конфигурации