dima9595
@dima9595
Junior PHP

Как правильно подключить и использовать vue-axios?

Установил axios в своё приложение Vuejs, начал его использовать, но в консоли выдаётся, что не установлен он. В чём проблема?
В package.json он находится. Пробовал даже npm install и т.п. - эффект тот же.

main.js
// Главные модули
import Vue from 'vue'
// *******
import axios from 'axios'
import VueAxios from 'vue-axios'

// Главные компоненты
import App from './App.vue'
import Routes from './routes.js'

// Включение главных модулей
// *******
Vue.use(VueAxios, axios)

// Настройка модулей
axios.defaults.baseURL = 'http://api.site.ru/'; // Базовый URL адрес
axios.defaults.headers.common['X-CSRF-TOKEN'] = '*************************************************';    // Токен

new Vue({
    el: '#app',
    render: h => h(App),
    router: Routes
})

Register.vue
<template>
    <form>
        <v-text-field label="Логин:" required
                      v-model="register.login" :counter="10"
                      v-validate="'required|min:4'"
                      data-vv-name="register.login" data-vv-as="login"
                      :error-messages="errors.collect('register.login')">
        </v-text-field>

        <v-text-field label="E-mail:" required
                      v-model="register.email" v-validate="'required|email'"
                      data-vv-name="register.email" data-vv-as="e-mail"
                      :error-messages="errors.collect('register.email')">
        </v-text-field>

        <v-text-field label="Пароль:" type="password" required
                      v-model="register.password" v-validate="'required|min:6'"
                      data-vv-name="register.password" data-vv-as="password"
                      :error-messages="errors.collect('register.password')">
        </v-text-field>

        <v-btn color="success" :loading="loading" :disabled="loading" @click="submitRegister()">
            Зарегистрироваться
            <span slot="loader">Регистрация аккаунта...</span>
        </v-btn>
    </form>
</template>

<script>
    export default {
        name: 'auth_register',
        metaInfo: {
            title: 'Регистрация'
        },

        data() {
            return {
                loading: false, // Кнопка загрузки
                loader: null,   // Кнопка загрузки

                register: {},   // Данные регистрации
            }
        },

        methods: {
            submitRegister() {
                this.loading = true

                axios.post('auth/register', this.register)
                    .then((response) => {
                        console.log(response.data)

                        this.loading = false
                    })
                    .catch((error) => {
                        console.log(error)
                        this.loading = false
                    })
            }
        }
    }
</script>

Ошибки в консоли
[Vue warn]: Error in event handler for "click": "ReferenceError: axios is not defined"

found in

<VBtn>
       <AuthRegister> at src\components\Auth\Register.vue
         <VContent>
           <VApp>
             <App> at src\App.vue
               <Root>

ReferenceError: axios is not defined
  • Вопрос задан
  • 6449 просмотров
Решения вопроса 2
@akass
Developer
Vue.axios('url').then(response => console.log(response));
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы