N
Nuxt•13mo ago
BobLamarley

Call method og a RefImpl Object

I have exported a method from a component via defineExpose : 
<script setup>
    const props = defineProps(['country'])

    let selectedCountry = ref(null)
    let list = ref([])
    let loading = ref(false)
    let label = "Select a country"

    async function getCountry(countryName) {
        let country = null

        await baseFetch("/api/geocoding/search_country/?query=" + countryName, {
            method: "GET",
        })
        .then(res => {
            country = res[0]
        })
        .catch(err => {
            console.log(err)
        })

        return country
    }

    defineExpose({
        getCountry
    })
</script>
<script setup>
    const props = defineProps(['country'])

    let selectedCountry = ref(null)
    let list = ref([])
    let loading = ref(false)
    let label = "Select a country"

    async function getCountry(countryName) {
        let country = null

        await baseFetch("/api/geocoding/search_country/?query=" + countryName, {
            method: "GET",
        })
        .then(res => {
            country = res[0]
        })
        .catch(err => {
            console.log(err)
        })

        return country
    }

    defineExpose({
        getCountry
    })
</script>
then i have reffed this component with ref="myRef" 
                              <SearchCountries ref="refCountry" :id="'search-country-' + index" class="pt-4" style="width: 210px" v-model="metadataResults[index][header.key]" :country="metadataResults[index][header.key]" />
                              <SearchCountries ref="refCountry" :id="'search-country-' + index" class="pt-4" style="width: 210px" v-model="metadataResults[index][header.key]" :country="metadataResults[index][header.key]" />
in the template part and i'm trying to call the child method of the component from the parent, i'm having a RefImpl object (cf the capture image ) who actually has my method called getCountry but i don't know how to call it and she's not known with my current call Here is how i tried to call it : 
refCountry[0].getCountry(cell.value)
 
refCountry[0].getCountry(cell.value)
No description
No description
4 Replies
Likonima
Likonima•13mo ago
you didnt show the whole code but likely you forgot the .value on the refCountry
BobLamarley
BobLamarleyOP•13mo ago
Thnaks that was the problem 🙂 refCountry.value[0].getCountry(cell.value)
manniL
manniL•13mo ago
you need to expose the methods via defineExpose
manniL
manniL•13mo ago
https://vuejs.org/api/sfc-script-setup.html#defineexpose
Vue.js
Vue.js - The Progressive JavaScript Framework

Did you find this page helpful?