在 Laravel / Vue 中通过 Axios 获取数据答案

【问题标题】：Fetching data by Axios in Laravel / Vue在 Laravel / Vue 中通过 Axios 获取数据
【发布时间】：2019-06-21 03:35:03
【问题描述】：

我在获取数据时遇到问题。这是控制台中弹出的错误...

未捕获的错误：模块构建失败（来自 ./node_modules/babel-loader/lib/index.js）：语法错误： /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'
});

【问题讨论】：

这可能会有所帮助：stackoverflow.com/questions/42706584/…
到底想做什么。
我只是想在模板中显示我的数据...@ashokpoudel 但首先当然要尝试在控制台中查看它...
如果你使用的是laravel那么你不需要导入axios

标签： javascript laravel vue.js ecmascript-6 vuejs2

【解决方案1】：

你正在使用 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 () {
    });
  }
}

【讨论】：

【解决方案2】：

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

【讨论】：

我该怎么做呢？请您再解释一下。

【解决方案3】：

好的，首先，您的语法错误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 () {
    });
  }
}

附：我认为理解 es6 模块会对你有所帮助，所以这里是一个链接：https://www.sitepoint.com/understanding-es6-modules/

【讨论】：