Filtrowanie danych z poziomu okna modalnego

Hej,
moim celem jest: wchodzę na stronę -> ładuję listę dokumentów (z zadanego defaultowego przedziału czasowego i wszystkich właścicieli) ->mam możliwość podnieść okno modalne, na którym wybieram zakres dat, z dropdowna nazwisko/a i klikam OK -> dane po zamknięciu okna zostaną przeładowane.

mam komponent, w którym ładuję dane ( domyślne jakieś tam parametry ) w metodzie onMounted

const tableData = ref<Array<ITransaction>>([]);

w tym komponencie wstawiłem okno modalne przekazując domyślne parametry

  <DatesFilterModal
    :dateFrom="params.Start"
    :dateTo="params.End"
    :options="phOption"
  ></DatesFilterModal>

dotąd jest ok. Nie wiem teraz co zrobić aby po zatwierdzeniu okna modalnego odświeżyć dane?
Czy parametry z okna modalnego jakoś zwrócić do rodzica i pobrać nowe dane z ich użyciem?

john_doe napisał(a):

Czy parametry z okna modalnego jakoś zwrócić do rodzica i pobrać nowe dane z ich użyciem?

Musisz przekazać dane, oraz funkcję do aktualizacji tych danych z komponentu rodzica (jakiś komponent korzystający z tego modala) do zagnieżdżonego komponentu, który będzie je aktualizował.

https://vuejs.org/guide/components/events.html#emitting-and-listening-to-events

Kod może być niepoprawny, bo piszę go z pamięci, ale myślę, że pokazuje mniej więcej o co chodzi

Parent.vue

<template>
   <div class="parent">
      ...
      ...

      <Modal 
        :valueA="valueA" 
        :valueB="valueB" 
        @updateData="modalUpdateCallback" 
      />

      <p>Aktualna wartość zmiennej "valueA" {{ valueA }}</p>
      <p>Aktualna wartość zmiennej "valueB" {{ valueB }}</p>
   </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const valueA = ref(0);
    const valueB = ref(0);
  
    const modalUpdateCallback = (data) => {
      // Zmienna "data" powinna zawierać stan przekazany z zagnieżdżonego komponentu
    
      valueA.current = data.valueA; // <-- 123
      valueB.current = data.valueB; // <-- 789
    };
  
    return {
      valueA,
      valueB,
      modalUpdateCallback
    }
  }
}
</script>

Modal.vue

<template>
  <div class="modal">
     ...
     ...
     
     <button @click="updateData">Zaktualizuj dane</button>
  </div>
</template>
 
<script>
  export default {
    emits: ['updateData'],
    setup(props, ctx) {
      const updateData = () => { 
        // Wywołujemy event z komponentu rodzica
        // i przekazujemy do niego zaktualizowany stan 
        
        ctx.emit('updateData', {
          valueA: 123,
          valueB: 789
        });

        // Przed wywołaniem emit moglibyśmy dodać jeszcze jakąś walidacje przekazanych wartości
        // żeby sprawdzić, czy dane "valueA" i "valueB" są prawidłowe
      }
    
      return {
        updateData,
      } ;
    },
  };
</script>