Nuxt•10mo ago

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)

4 Replies

Likonima•10mo ago

you didnt show the whole code but likely you forgot the .value on the refCountry

BobLamarleyOP•10mo ago

Thnaks that was the problem 🙂

refCountry.value[0].getCountry(cell.value)

manniL•10mo ago

you need to expose the methods via defineExpose

manniL•10mo ago

https://vuejs.org/api/sfc-script-setup.html#defineexpose

Vue.js

Vue.js - The Progressive JavaScript Framework

Gaming

Programming

Call method og a RefImpl Object