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

This might help: https://stackoverflow.com/questions/42706584/eslint-error-parsing-error-the-keyword-const-is-reserved — gvk, Jan 28 '19 at 06:51
I am just trying to display my data in template... @ashokpoudel But first of course trying to see it in the console... — , Jan 28 '19 at 06:54
If you are using laravel then you don't need to import axios — ashok poudel, Jan 28 '19 at 07:21

score 0 · Answer 1 · answered Jan 28 '19 at 06:55

0

@Barbie try to add .babelrc config file

answered Jan 28 '19 at 06:55

A.Abdelhak

140
4

and how am I gonna do that? could you explain a bit more, please. – Jan 28 '19 at 06:56

score 0 · Answer 2 · answered Jan 28 '19 at 11:14

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 () {
    });
  }
}

P.S. I think understanding es6 modules would be helpful for you, so here is a link: https://www.sitepoint.com/understanding-es6-modules/

score 0 · Accepted Answer · answered Jan 28 '19 at 11:16

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 () {
    });
  }
}

Fetching data by Axios in Laravel / Vue

3 Answers3