使用组合API vuejs 3调用函数和发送参数

crcmnpdw  于 2023-03-31  发布在  Vue.js
关注(0)|答案(1)|浏览(151)

我正在尝试从其他组件调用函数。
我的父组件formTelemarketing()当我点击我的按钮时,应该将数据发送到我的其他组件nAsignedCalls()并调用该组件中的函数getCalls(param),并且该函数调用可组合函数

const getCall = async (param_search) => {
        let response = await axios.get('/api/callApi', {param_search: {'param_search': param_search} }) 
        console.log(response.data.data)
        calls.value = response.data.data
    }

但是我的问题是我不知道如何调用这个函数。我在我的父级中有这个:

<input type="button" class="btn btn-dark" value="Buscar registros" @click="searchRegisters()">

const nAsignedCalls = ref(null);
function searchRegisters(){
                var address = "";
                var city = "";
                var cp = "";

                address = document.getElementById("address").value
                if( address != "" ) {
                    param_search = "address";
                }

                city = document.getElementById("city").value
                if( city != "" ) {
                    param_search = "city";
                }

                cp = document.getElementById("postal_code").value
                if( cp != "" ) {
                    param_search = "cp";
                }

                nAsignedCalls.getCalls(param_search);
            }

在我的命运组件中:

return {
   ...
   getCalls
}

但是当点击我的按钮时,在控制台返回:

nAsignedCalls.getCalls is not a function
    at Proxy.searchRegisters (app.js:20068:21)
    at onClick._cache.<computed>._cache.<computed> (app.js:21727:19)
    at callWithErrorHandling (app.js:7336:22)
    at callWithAsyncErrorHandling (app.js:7345:21)
    at HTMLInputElement.invoker (app.js:15616:86)

更新:
我的作文:

export default function useNcalls(){
    let calls = ref([])
    let param_search = ref([])
    let pagination = ref([])

    const getCall = async (param_search) => {
        let response = await axios.get('/api/callApi', {param_search: {'param_search': param_search} }) 
        console.log(response.data.data)
        calls.value = response.data.data
    } 
    const deleteCall = (id) => axios.post(`/api/callApi/${id}`, {_method: 'delete'}).then(res => {
        confirm("¿Está seguro de que desea eliminar el registro?") 
        location.reload();
    }).catch(err => {
        console.log(err);
    });  
    
    const queryForKeywords = async (event) => {
        const response = await axios.get('/api/callApi/show', { params: { 'searchParams': event } }) 
        calls.value = response.data.data
    };

    const getResults = async (page) => {
        const response = axios.get('api/callApi?page=' + page)
        calls.value = response.data
    };

    const getItems = async (page) => {
        axios.get('/api/callApi?page='+page)
            .then(response => {
                calls.value = response.data.data;
                pagination.value = response.data.meta;
            });
    };

    expose({ getCalls })

    return{
        calls,
        getCall,
        deleteCall,
        queryForKeywords,
        getResults,
        getItems
    } 
}

我做错了什么?谢谢你读我,对不起我的英语不好

g6ll5ycj

g6ll5ycj1#

setup()函数中的return只将组件的属性公开给它自己的模板。

export default {
  setup(props, { expose }) {
    const getCalls = () => { ... }

    expose({ getCalls })
  }
}

相关问题