MedicationSearchService.js
import axios from "axios";
const MEDICATION_GENERIC_API_URL ='http://localhost:8080/medication/search/generic/'
const MEDICATION_MAIN_API_URL ='http://localhost:8080/medication/search/main/'
class MedicationSearchService{
getMedicationsByCriteria(criteria,val){
if(criteria == 'Main'){
return axios.get(MEDICATION_MAIN_API_URL+val);
}else if(criteria == 'Generic'){
return axios.get(MEDICATION_GENERIC_API_URL+val);
}
}
}
export default new MedicationSearchService()
MedicationSearch.vue
<template>
<div class="input-group">
<input v-model="val" type="text">
<select v-model="criteria">
<option value="Main" selected>Main Name</option>
<option value="Generic">Generic Name</option>
</select>
<button type="submit" v-on:click="get_Medications_by_criteria()">Search</button>
</div>
</template>
<script>
import medicationSearchService from '@/services/medicationSearchService';
export default{
name:'Medications_by_criteria',
data(){
return{
criteria:'',
val : '',
medicationsByCriteria:[]
}
},
methods:{
get_Medications_by_criteria(){
// medicationSearchService.getMedicationsByCriteria(this.criteria,this.val).then((response)=>{
medicationSearchService.getMedicationsByCriteria('Main','Loratadine').then((response)=>{
this.medicationsByCriteria = response.data;
});
}
},
created(){
this.get_Medications_by_criteria()
}
}
</script>
error:
Unhandled Promise Rejection: TypeError: undefined is not an object (evaluating'services_medicationSearchService__WEBPACK_IMPORTED_MODULE_0_["default"].getMedicationsByCriteria(this.criteria, this.val).then')
want to use like this
medicationSearchService.getMedicationsByCriteria(this.criteria,this.val).then((response)=>{but getting error. but same method with static data is working like this
medicationSearchService.getMedicationsByCriteria('Main','Loratadine').then((response)=>{what's wrong in this
medicationSearchService.getMedicationsByCriteria(this.criteria,this.val).then((response)=>{