Vue - Топор ios не определен - PullRequest
Новая
       29

Vue - Топор ios не определен

0 голосов
/ 20 марта 2020

В проекте Laravel + Vue я пытаюсь использовать топор ios, чтобы получить ответ API. Ax ios вызовите конечную точку Laravel и получите ответ контроллера.

Код выглядит

JS

require("./bootstrap");

import Swal from "sweetalert2";
import VueI18n from "vue-i18n";
import VueRouter from "vue-router";
import axios from "axios";

import Vuetify from "vuetify";
import es from "vuetify/es5/locale/es";
import en from "vuetify/es5/locale/en";
import "@mdi/font/css/materialdesignicons.css";

import ContadoresComponent from "./components/ContadorComponent.vue";
import GatewaysComponent from "./components/GatewayComponent.vue";
import MainComponent from "./components/MainComponent.vue";


const routes = [{
        path: "/",
        name: "principal",
        component: MainComponent
    },
    {
        path: "/contadores",
        name: "contadores",
        component: ContadoresComponent
    },
    {
        path: "/gateways",
        name: "gateways",
        component: GatewaysComponent
    }
];

window.Vue = require("vue");
Vue.use(Vuetify);
Vue.use(VueRouter);
Vue.use(VueI18n);
Vue.use(axios);

Vue.component(
    "drawer-component",
    require("./components/DrawerComponent.vue").default
    /*  methods: {
          changeLocale (lang) {
            this.$vuetify.lang.current = lang
          },
    },*/
);

Vue.component(
    "table-component",
    require("./components/TableComponent.vue").default
);

export default new Vuetify({
    icons: {
        iconfont: "mdi"
    },
    lang: {
        locales: {
            es,
            en
        },
        current: "es"
    }
});

const router = new VueRouter({
    routes
});

new Vue({
    vuetify: new Vuetify(),
    router
}).$mount("#app");

Vue (Vuetify) 

<template>
  <v-container class="fill-height" fluid>
    <v-row align="center" justify="center">
      <v-card class="mx-auto">
        <v-list-item>
          <v-list-item-content>
            <v-list-item-title class="headline">Contador</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
        <table-component></table-component>
      </v-card>
    </v-row>
  </v-container>
</template>
<script>
axios.get("/contadores").then(response => console.log(response));
</script>

Ошибка: топор возврата ios не определен, но я думаю, что я определен в файле приложения. js.

Кто-нибудь видел ошибку?

Ответы [ 4 ]

1 голос
/ 20 марта 2020

Вам все еще нужно импортировать его во второй файл. Ваш скрипт должен выглядеть так: 

<script>
import axios from 'axios';
axios.get("/contadores").then(response => console.log(response));
</script>
0 голосов
/ 20 марта 2020

Я исправляю ошибку с 

export default {
  mounted() {
    axios
      .get("ENDPOINT")
      .then(response => console.log(response));
  }
};
0 голосов
/ 20 марта 2020

Интересный подход, который я использую в своих проектах, заключается в использовании библиотеки vue -ax ios, которая очень проста в установке. Если вам нужно установить зависимости в вашем проекте с помощью команд npm install --save axios vue-axios, а затем импортировать их в файл main.js или основной файл приложения: 

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
 
Vue.use (VueAxios, axios)

Использование ax ios в компоненте будет через this.axios.get(`${url}`). Другой подход, уже представленный друзьями здесь, в StackOverflow, заключается в импорте топора ios непосредственно в компонент, который вы хотите использовать: 

<template>
<div>
...
</div>
</template>
<script>
import axios from 'axios';

export default {
   name: 'ComponentName',
   methods: {
      async getAsyncApi() {
         try {
            const result = await axios.get(`${url}`);
        } catch(e) {
            window.console.error('Error! ', e.message);
        }
      },
      getApi() {
         let result;
         axios.get(`${url}`).then((r) => {
           result = r;
         }).catch(e => window.console.error('Error! ', e.message));
      },
   },
};
</script>
0 голосов
/ 20 марта 2020

Вы не импортировали топор ios в свой файл.

Чтобы решить эту проблему, либо импортируйте его в свой файл, где вы хотите использовать его, как показано ниже

import axios from 'axios';

ИЛИ

Если вы не хотите импортировать его в каждый компонент, где вы его используете, вы можете добавить его к прототипу Vue: 

window.axios = require('axios');

//... configure axios...

Vue.prototype.$http = window.axios;

Затем в любом компоненте вы можете использовать 

this.$http.post('event/store', {
    'name': this.name,
})
...