VueJS Вызов дочернего метода из родительского

Question

Вообщем есть проект на vueJs, я пытаюсь вызвать метод дочернего компонента из родительского, но что-то не выходит. Вот что в родительском компоненте:

<modalWindow :dialog="openFilter" :maxWidth="'720px'">
  <filterComponent ref="filterData" @callUpdateChartAndDataGrid="updateChartAndDataGrid" @callCloseModal="closeModal"></filterComponent>
</modalWindow>

<script>
    import ModalWindow from '@/components/Other/ModalComponent';
    import FilterComponent from '@/components/Other/FilterComponent';

...
onFilter () {
  this.openFilter = !this.openFilter;

  this.$refs.filterData.checkAllBills()
  this.$refs.filterData.checkAllCategories()
  this.$refs.filterData.checkAllCurrencies()
  this.$refs.filterData.checkAllTypes()
},
...

Ну методы такие в дочернем точно есть, но ошибка получаю вот такую:

vue.runtime.esm.js?2b0e:1888 TypeError: Cannot read properties of undefined (reading 'checkAllBills')

Прошу помощи.

Answer 1

Вообщем посидел подумал и решил сделать так, поскольку я всё равно буду запускать функции только 1 раз, при первом появлении, я решил сделать так:

<modalWindow :dialog="openFilter" :maxWidth="'720px'">
  <FilterComponent :billsParent="bills" :categoriesParent="categories" :currenciesParent="currencies"
    :typesParent="types" @callUpdateChartAndDataGrid="updateChartAndDataGrid" @callCloseModal="closeModal" />
</modalWindow>
...
onFilter () {
  this.openFilter = !this.openFilter;

  if (this.bills.length === 0) {
    this.profile.forEach((item) => {
      this.bills.push(item.id)
    })
  }

  if (this.categories.length === 0) {
    this.category.forEach((item) => {
      this.categories.push(item.id)
    })
  }

  if (this.currencies.length === 0) {
    this.currenciesUser.forEach((item) => {
      this.currencies.push(item.CharCode)
    })
  }

  if (this.types.length === 0) {
    this.arrTypes.forEach((item) => {
      this.types.push(item.id)
    })
  }
},

Грубо говоря я объявляю эти же параметры в родительском компоненте при открытии фильтра я их заполняю и передаю в фильтр там в методу mounted я их применяю к параметрам дочернего компонента.

БЛОГ НА HUSL

VueJS Вызов дочернего метода из родительского

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