calling typeScript function from VUE component

Question

I just started with VUE and I am stuck.

I have a simple VUE component and the script part of it is:

<script>
import Dish from './dish.vue'
import SearchBar from './search.vue'
import axios from 'axios'

export default {
    components: {Dish, SearchBar},
    name: "selectDish",
    data() {
        return {
            dishes : []
        }
    },
    mounted(){     
    axios.get('http://example.com/',{method :'GET'})
    .then(response =>{
        console.log(response);
        this.dishes=response.data
        })
    }
}

What I am trying to achieve is to remove the axios API GET call that I have inside the VUE compoennt as above and instead call the function that I have written inside my APIService.TS file which ultimately makes the GET call.

My apiService.ts file is as Below:

import Promise, { config, resolve, reject } from 'bluebird';
import Config from '../config';
import axios from 'axios';

export class APIService{
    constructor(){  }
    public giveMeAllDishes(dishType, query) : Promise<string>{

          return new Promise((resolve,reject) =>{
               axios.get('http://example.com',{method : 'GET'})
               .then(function(respone){
                   console.log(respone);
                   resolve(respone.data);
               })
               .catch(function(err){
                   reject(err);
               })
           })
    }
}

When I put the import APIService from '../../services/apiService' inside the VUE component, I get an error saying :

ERROR in ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/selectDish/selectDish.vue
Module not found: Error: Can't resolve '../../services/apiService'

Also, when I solve this referencing issue, How can I call the 'giveMeAllDishes' function of API Service from VUE Component ?

The question doesn't contain stackoverflow.com/help/mcve . The module either doesn't exist at the path you listed (../../services/apiService) or the project isn't configured for TS. Any way, the problem only can be investigated on your side. — Estus Flask
– Estus Flask, Commented Sep 27, 2019 at 14:02
You do not need to wrap the axios.get() call in a new Promise. This is the classic promise construction anti-pattern — Phil
– Phil, Commented Sep 30, 2019 at 4:01

th3n3wguy · Accepted Answer · 2019-09-30 03:49:59Z

1

Your import is slightly wrong. Here is what it needs to be:

import { APIService } from '../../services/apiService'

answered Sep 30, 2019 at 3:49

th3n3wguy

3,7242 gold badges25 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Phil Over a year ago

OP will need to do this but first they have to fix the "Module not found" error

Collectives™ on Stack Overflow

calling typeScript function from VUE component

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related