Вызов метода дочерного компонента nuxt js

Question

Использую Nuxt2, последнюю версию @nuxtjs/composition-api, всё в режиме ssr. Нужно вызвать функцию которая находится в компоненте фильтров по клику на кнопку в родителе, вот так почему то не работает, пишет что resetForm не функция.

Вот родитель:

    <Filters ref="filters" class="catalog__filters" />

    <SpecialistsList class="h-hide" />

    <section class="catalog__info container">
        <h4 class="catalog__info-title"></h4>

        <p class="catalog__info-text">Попробуйте изменить или сбросить фильтры</p>

        <my-button class="catalog__info-button" :type="'light'" @click="$refs.filters.formReset()">Сбросить</my-button>

        <div class="catalog__info-img">
            <svg-icon name="seo" />
        </div>
    </section>
</div>

Вот дочерная функция:

<script setup>
const formReset = () => {
   form.value.search = '';
   form.value.specialization = null;
   form.value.level = null;
};

Answer 1

В общем сделал вот такой вариант. Родитель:

<template>
<div class="catalog">
    <Filters class="catalog__filters" :form-reset-click="formResetClick" @formReset="formReset" />

    <SpecialistsList class="h-hide" />

    <section class="catalog__info container">
        <h4 class="catalog__info-title"></h4>

        <p class="catalog__info-text"></p>

        <my-button class="catalog__info-button" :type="'light'" @click="formResetClick = true">Сбросить</my-button>

        <div class="catalog__info-img">
            <svg-icon name="seo" />
        </div>
    </section>
</div>

const formResetClick = ref(false);
const formReset = data => formResetClick.value = data;

И в дочерном:

const props = defineProps({
formResetClick: {
    type: Boolean,
    default: false,
},

});

const emit = defineEmits(['formReset']);

watchEffect(() => {
if (props.formResetClick) {
    formReset();

    emit('formReset', false);
}

});

БЛОГ НА HUSL

Вызов метода дочерного компонента nuxt js

Ответы (1 шт):