CODEWITHSUNDEEP
typescriptvue.jsvuejs2vue-componentvuejs3
Nok Pollawat
Nok Pollawat

Reputation: 39

How to get data and binding data from onMounted VueJS

Test.vue

<template>
  <li v-for="item in masterCompany" v-bind:key="item.id">
    {{ item.displayName }}
  </li>
</template>
<script>
import Test from "../hooks/Test.hook";
import { onMounted } from "vue";
export default {
  setup() {
    const { getCompanysService, masterCompany } = Test.onLoadCompanys();
    onMounted(getCompanysService);
    return {
      getCompanysService,
      masterCompany,
    };
  },
};
</script>

Test.hook.js

import MasterService from '../services/masters.service'
import {reactive} from 'vue' 
function LoadCompanys() { 
    let masterCompany = reactive([])
    const getCompanysService = async () => 
        { 
            masterCompany.value = await MasterService.getCompanys();
        }
    return  {
        masterCompany,
        getCompanysService
    }
}

export default {  
    onLoadCompanys : LoadCompanys
};

master.service.js

    import HttpRequest from './api.service' 
    let http = new HttpRequest(); 
    export const Masters = { 
        async getCompanys(){ 
            let url = 'https://Test.com/GetCompany';
            return await http.get(url).then((res) => { 
               console.log('getCompanys',res)
                return res.data;
            })
    }
} 
export default Masters

I tried to get data from api so but I don't know to binding in components

components does not show value.

Or is there a better way to do this? Please advise.

enter image description here

Upvotes: 0

Views: 381

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

masterCompany should be defined as ref or a nested field in an object passed toreactive :

import MasterService from '../services/masters.service'
import {ref} from 'vue' 
function LoadCompanys() { 
    let masterCompany = ref([])

Upvotes: 1

Related Questions