Filtry wyszukiwania emitowane przez event

Mam box z filtrami (powiedzmy filtr Miasto: Warszawa, Kraków, Poznań). Teraz user zaznacza wybrane miasta i klika button Search. W kodzie mam:

this.$emit('user-filters', this.filters)

po to aby w osobnym komponencie Chips odebrać ten event z tablicą filtrów i wyrenderować ją jako chipsy z wybranymi filtrami gdzieś u góry strony. Do tego momentu wszystko działa. I teraz użytkownik może ponownie wybrać sobie kolejne miasto z filtrów tylko, że wybrane przez niego miasto renderuje się jako chips bez klikania Search. Wygląda na to jakby komponent Chips po pierwszym odebraniu eventu z tablicą cały czas trzymał referencję do tej tablicy i reagował na zmiany. Da się jakoś zmienić aby komponent Chips renderował chipsy tylko przy pierwszym odebraniu eventu, a późniejsze zmiany tablicy z filtrami w innym komponencie go nie interesowały?

this.filters pewnie przechowuje referencję do wewnętrznego obiektu.

Spróbuj

this.$emit('user-filters', Object.assign([], this.filters)); // jeśli to jest obiekt

this.$emit('user-filters', Array.from(this.filters)); // jeśli to jest tablica

To jest obiekt w postaci:

filters: { towns: [], drugiFilter: [] },

po zastosowaniu pierwszego sposobu wygląda na to, że jest jakaś zmiana. Lista nie jest reaktywna, ale teraz nie działa v-for w komponencie Chips.

Dodam jeszcze, że po odebraniu tego eventu z filtrami w parencie wstrzykuję go jako props do komponentu Chips. Parent wygląda mniej więcej tak:

<template>

  <UserFilters @user-filters="handleData($event)" />
  <ChipsComponent :filtersProp=this.filters />

</template>

<script>
   methods: {
    handleData(e) {
      this.filters = e;
    }
   }
</script>

Jak widać do ChipsComponent przekazuje obiekt używając instrukcji z dwukropkiem:

:filtersProp=this.filters

Według dokumentacji Vue https://vuejs.org/guide/components/props.html#static-vs-dynamic-props

jest to dynamicznie przekazywanie. Ale gdy usuwam dwukropek to znowu nie renderuje mi się strona.

slayer9 napisał(a):

Ale gdy usuwam dwukropek to znowu nie renderuje mi się strona.

Bez dwukropka to nie ma prawa działać.

Ostatecznie zadziałało:

const returnedTarget = JSON.parse(JSON.stringify(this.filters));
this.$emit('user-filters', returnedTarget)