VueJS + Typescript: свойство не существует для типа

Я создал простое приложение Vue с использованием vue-cli 3 и настроил с помощью TypeScript. Я также установил axios и пытаюсь использовать его в mounted(), чтобы загружать данные и отображать их в компоненте.

Вот код:

<script lang='ts'>

import { Component, Prop, Vue } from 'vue-property-decorator';
import SearchBar from '@/components/prods_comp/SearchBar.vue';
import ProdsTable from '@/components/prods_comp/ProdsTable.vue';

@Component({
  components: {
    SearchBar,
    ProdsTable,
  },
})
export default class MainProds extends Vue {

  @Prop({ default: 'Produits' }) private message!: string;

  mounted() {
    const baseURI = 'http://localhost:8069';
    this.$http({
      method: 'POST',
      url: baseURI + '/vue_web_services/msg/',
      headers: { 'content-type': 'application/json',},
      data: {
      }
    }).then(function (response) {
      console.log(response.data);
    });
  }
}

</script>

Это довольно простой вызов API. Оно работает. Проблема в этом сообщении, которое продолжает появляться в консоли:

ERROR in D:/ODOO/Vue/bons_commande/src/components/prods_comp/MainProds.vue
26:10 Property '$http' does not exist on type 'MainProds'.
    24 |   mounted() {
    25 |     const baseURI = 'http://localhost:8069';
  > 26 |     this.$http({
       |          ^
    27 |       method: 'POST',
    28 |       url: baseURI + '/vue_web_services/msg/',
    29 |       crossdomain: true,

РЕДАКТИРОВАТЬ: Вот main.ts:

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import VueSweetalert2 from 'vue-sweetalert2';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import '@/assets/scss/tailwind.scss';
import axios from 'axios';

Vue.config.productionTip = false;
Vue.prototype.$http = axios;

Vue.use(ElementUI);
Vue.use(VueSweetalert2);

new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app');

typescript vue.js vue-cli-3
person Kyle Sentient    schedule 04.02.2019    source источник

Ответы (2)


arrow_upward
9
arrow_downward

Похоже, вам не хватает vue-axios, который добавляет $http к прототипу Vue, позволяя this.$http() вызовы из отдельных файловых компонентов.

Чтобы решить проблему:

  1. Установите vue-axios из командной строки:

    npm i -S vue-axios

  2. Добавьте следующий код в main.ts:

    import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)
person tony19    schedule 06.02.2019

arrow_upward
5
arrow_downward

Создайте файл плагина, как показано ниже, и используйте его в main.ts

Подробная документация - https://vuejs.org/v2/guide/typescript.html#Augmenting-Types-for-Use-with-Plugins

import _Vue from 'vue';
import Axios from 'axios';
export function AxiosPlugin<AxiosPlugOptions>(Vue: typeof _Vue, options?: AxiosPluginOptions): void {
   // do stuff with options
   Vue.prototype.$http = Axios;
 }
export class AxiosPluginOptions { // add stuff } 
import { AxiosStatic } from 'axios';
declare module 'vue/types/vue' {
   interface Vue {
     $http: AxiosStatic;
 }
}
person Mohit Tilwani    schedule 05.02.2019
comment
Спасибо за ответ, но я не слишком знаком с пользовательскими плагинами. Как мне добавить его в свой файл main.ts? - person Kyle Sentient; 06.02.2019