Filtrowanie tablicy w child komponencie

Hej,
do okna modalnego przekazuję dane pobrane z api

export interface IErpDemand {
  skuCode: string;
  skuName: string;
  addons: string;
  quantity: number;
  productionWarehouseQuantity: number;
  salesWarehouseQuantity: number;
}
export interface IErpDemandArray extends Array<IErpDemand> {}

  const demand: IErpDemand[] = reactive([]);
  // jakiś fetch
  // przekazanie do child
  <DemandModal :demand="demand"></DemandModal>

w oknie modalnym

props: {
    demand: {
      type: Array as PropType<IErpDemandArray>,
      required: true,
    },
  },

i w jakiejś pętli wyświetlam w tabelce demand

<template v-for="(item, index) in demand" :key="index">

Chciałbym teraz dodać np checkbox "pokaz tylko jakiś tam typ" lub wszystko z powrotem
Czy mogę filtrować po propsach? np

  setup(props) {
    const getSacksOnly = (event) => {
      event.preventDefault();
      return props.demand.filter((item) => item.skuCode.includes("25"));
    };
    
    return {
      getSacksOnly,
    };
  }

nie działa
czy użyć emit do rodzica?

Powinieneś wywołanie tej metody zapisywać do jakiegoś stanu

john_doe napisał(a):

  setup(props) {
    const getSacksOnly = (event) => {
      event.preventDefault();
      return props.demand.filter((item) => item.skuCode.includes("25"));
    };
    
    return {
      getSacksOnly,
    };
  }

i robić pętle po przefiltrowanym stanie, a nie po oryginale, który nadal zawiera wszystkie swoje pozycje (twoja metoda getSacksOnly przecież nie mutuje tej wartości, tylko zwraca nową tablicę)

<template v-for="(item, index) in demand" :key="index">

chodzi o coś takiego?

setup(props) {
    let dataToDisplay: IErpDemand[] = reactive([]);
    
    const getSacksOnly = () => {
      dataToDisplay.splice(
        0,
        dataToDisplay.length,
        ...props.demand.filter((item) => {
          item.skuCode.includes("25");
        })
      );
    };
    
    return {
      getSacksOnly, dataToDisplay,
    };
  }

  <template v-for="(item, index) in dataToDisplay" :key="index">

john_doe napisał(a):

chodzi o coś takiego?

setup(props) {
    let dataToDisplay: IErpDemand[] = reactive([]);
    
    const getSacksOnly = () => {
      dataToDisplay.splice(
        0,
        dataToDisplay.length,
        ...props.demand.filter((item) => {
          item.skuCode.includes("25");
        })
      );
    };
    
    return {
      getSacksOnly,
    };
  }

  <template v-for="(item, index) in dataToDisplay" :key="index">

Tak, dokładnie o coś takiego, tylko powinieneś chyba zwrócić dataToDisplay w setup + uzupełnić brakujący return w filter .

dokładnie, teraz działa, dzięki.
pozostaje jeszcze inicjalne otwarcie modal gdzie mają być wszystkie pozycje.
spróbowałem tak

    onMounted(() => {
      dataToDisplay.splice(0, dataToDisplay.length, ...props.demand);
    });

john_doe napisał(a):

dokładnie, teraz działa, dzięki.
pozostaje jeszcze inicjalne otwarcie modal gdzie mają być wszystkie pozycje.
spróbowałem tak

    onMounted(() => {
      dataToDisplay.splice(0, dataToDisplay.length, ...props.demand);
    });

Kombinowałbym w ten sposób

const dataToDisplay: IErpDemand[] = reactive([...props.demand]);

bez tego hooka onMounted, bo finalnie i tak powinno wyjść na to samo.

Nie do końca rozumiem jak to działa bo ... tak wygląda całość przy Twojej pomocy

setup(props) {
    const dataToDisplay: IErpDemand[] = reactive(props.demand);

    const getSacksOnly = (event) => {
      event.preventDefault();

      dataToDisplay.splice(
        0,
        dataToDisplay.length,
        ...props.demand.filter((item) => {
          return item.skuCode.includes("25");
        })
      );
    };

    const setAllDemand = (event) => {
      event.preventDefault();

      dataToDisplay.splice(0, dataToDisplay.length, ...props.demand);
    };


    return {
      getSacksOnly,
      setAllDemand,
      dataToDisplay,
    };
  },

getSacksOnly przypiąłem do jednego buttona ... setAllDemand do drugiego buttona.
Jeśli wywołam getSacksOnly ... wywołanie setAllDemand nic nie wnosi a powinno przypisać wszystkie itemsy z powrotem z propsów. Ten kod mutuje props.demand?

john_doe napisał(a):

Nie do końca rozumiem jak to działa bo ...

To jest nas dwóch, bo Vue 3 jeszcze nie miałem okazji używać i odpowiadam Ci głównie na bazie wiedzy z Reacta :D

john_doe napisał(a):

const dataToDisplay: IErpDemand[] = reactive(props.demand);

Możliwe, że jest problem w tej początkowej linijce

setup(props) {
  const { demand } = toRefs(props);
  const dataToDisplay: IErpDemand[] = reactive(demand.value);

  // ...
}

i trzeba znaleźć sposób jak to poprawnie przypisać, bo poprzednie dwa warianty tego zapisu nam odpadają (reactive(props.demand) oraz reactive([...props.demand])) .

zrobiłem taki walkaround

  setup(props) {
    const initialData: IErpDayAssumption[] = reactive([]);
    const dataToDisplay: IErpDayAssumption[] = reactive(props.demand);

    const getSacksOnly = (event) => {
      event.preventDefault();
      initialData.splice(0, dataToDisplay.length, ...dataToDisplay);

      dataToDisplay.splice(
        0,
        dataToDisplay.length,
        ...props.demand.filter((item) => {
          return item.skuCode.includes("25");
        })
      );
    };

    const setAllDemand = (event) => {
      event.preventDefault();
      dataToDisplay.splice(0, dataToDisplay.length, ...initialData);
    };

    return {
      getSacksOnly,
      setAllDemand,
      dataToDisplay,
    };
  },