Laravel Vue Axios 未定义
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/51506947/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Laravel Vue Axios is not defined
提问by tigerel
I built a simple form using the vuetify Framework in my laravel app. The bootstrap.js already includes the axios Client but I still get the error on submit that axios is not defined:
我在我的 laravel 应用程序中使用 vuetify 框架构建了一个简单的表单。bootstrap.js 已经包含 axios 客户端，但在提交时我仍然收到错误，提示未定义 axios：
[Vue warn]: Error in event handler for "click": "ReferenceError: axios is not defined"
[Vue 警告]：“click”事件处理程序出错：“ReferenceError: axios is not defined”
This is the Default bootstrap.js file which ships with a new laravel Installation, I just removed jquery:
这是新的 Laravel 安装附带的默认 bootstrap.js 文件，我刚刚删除了 jquery：
window._ = require('lodash');
window.Popper = require('popper.js').default;
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
let token = document.head.querySelector('meta[name="csrf-token"]');
if (token) {
window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}
And this is how my app.js file Looks like:
这就是我的 app.js 文件的样子：
import bootstrap from 'bootstrap';
import 'material-design-icons-iconfont/dist/material-design-icons.css' // Ensure you are using css-loader
import Vue from 'vue';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';
Vue.use(Vuetify);
Vue.component('form-component', require('./components/FormComponent.vue'));
const app = new Vue({
el: '#app',
data: {
loading: true
},
});
The FormComponent Looks like this, basically I am trying to post the data using axios:
FormComponent 看起来像这样，基本上我是在尝试使用 axios 发布数据：
<template>
<v-container grid-list-xl>
<v-flex>
<v-text-field
v-model="name"
:error-messages="nameErrors"
:counter="10"
label="Name"
required
@input="$v.name.$touch()"
@blur="$v.name.$touch()"
></v-text-field>
</v-flex>
<v-flex>
<v-btn @click="submit">submit</v-btn>
<v-btn @click="clear">clear</v-btn>
</v-flex>
</v-container>
</template>
<script>
import { validationMixin } from 'vuelidate'
import { required, maxLength, email } from 'vuelidate/lib/validators'
export default {
mixins: [validationMixin],
validations: {
name: { required, maxLength: maxLength(20) }
},
data() {
return {
reactive: false,
name: '',
}
},
computed: {
nameErrors () {
const errors = [];
if (!this.$v.name.$dirty) {
return errors;
}
!this.$v.name.maxLength && errors.push('Name must be at most 10 characters long');
!this.$v.name.required && errors.push('Name is required.');
return errors;
},
},
methods: {
submit () {
this.$v.$touch();
axios.post('event/store', {
'name': this.name,
})
.then((response) => {
console.log("success");
})
.catch((error) => {
console.log("error");
})
},
clear () {
this.$v.$reset();
this.name = '';
}
}
}
</script>
I am loading axios so I do not know why that error appears.
我正在加载 axios，所以我不知道为什么会出现该错误。
回答by Jeff
If you don't want to import it in each component where you use it, you can add it to the Vue prototype:
如果不想在使用它的每个组件中都导入它，可以将其添加到 Vue 原型中：
window.axios = require('axios');
//... configure axios...
Vue.prototype.$http = window.axios;
Then in any component you can use
然后在您可以使用的任何组件中
this.$http.post('event/store', {
'name': this.name,
})
回答by DigitalDrifter
Import axios in the component:
在组件中导入 axios：
<script>
import axios from 'axios'
import { validationMixin } from 'vuelidate'
...
</script>
