Fetching data by Axios in Laravel / Vue

Question

I have problem about fetching data. This is error pops up in the console...

Uncaught Error: Module build failed (from ./node_modules/babel-loader/lib/index.js): SyntaxError: /var/www/html/laravel/resources/js/components/Content.vue: const is a reserved word (8:4)

am I doing something wrong about the usage?

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

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

@Barbie 尝试添加.babelrc配置文件

Answer 2

Ok, first, your syntax is wrong export default {} exports an object but your syntax is not correct.

An object syntax is key: value separated by ,

Ex:

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 I think understanding es6 modules would be helpful for you, so here is a link: https://www.sitepoint.com/understanding-es6-modules/

Answer 3

You are using Laravel, so axios is allready included (take a look into the require('/bootstrap') file). In your component, your export default{} is wrong. its an object, so treat it like one:

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