Aktualizacja komponentu w VUE

Question

Dzień dobry,

posidam aplikację napisaną w Vue. Jest to prosta aplikacja która ma component listy, w tym komponenecie posiadam for'a który tworzy mi elementy listy.

Elementy listy powinny być zrobione w momencie kiedy pobiorę dane z jednego serwisu, pobiorę dane z drugiego serwisu, a następnie zmapuje te dwa elementy w jeden i na tej podstawie powinienem zrobić foreach na komponenecie.

Mój problem polega na tym, że w momencie kiedy zmapuje dwa obiekty w jeden nie wiem wyświetlić elementy listy. Próbowałem to zrobić za pomocą watch {} ale w momencie kiedy w watch mam moje zmapowane obiekty nie mogę wyświetlić elementów.

Comments

Pokaż kod, będzie łatwiej Ci pomóc. Czy w konsoli są jakieś błędy?

---

@JSHolic

<Match v-for="mappedMatch in mappedMatches" :key="mappedMatch.id" :match="mappedMatch" />

  watch: {
    teams(newVal) {
      var test = this.matches.values.map((match) => {
        return {
          homeTeam: newVal.values.find(element => element.id == match.homeTeam),
          awayTeam: newVal.values.find(element => element.id == match.awayTeam)
        };
      })

      this.$emit('match', test);
    },
  },
  computed: {
    ...mapGetters(["matchesCount", "isLoading", "matches", "teams"])
  },

{
prosp: ['mappedMatches']
}

 

---

Jak rozumiem, metoda teams się wykonuje i emituje tablicę obiektów test? Czy coś słucha na emitowany event match?

---

Ten emit jest próbą, ale odpowiadając na pytanie, nic nie słucha na 'match'.

Ogólnie w tym podejściu dostaję Error w konsoli o tym że próbuję iterować po elemenciu który nie jest immutable. Jest to dla mnie jasny komunikat i zgadzam się z tym, że tak nie powinno się robić. Pytanie jest takie: Jak w takim razie updatować taki komponent?

---

Tutaj masz dokumentacje dla customowych eventów w Vue: https://vuejs.org/v2/guide/components-custom-events.html

Czy tutaj nie ma literówki: prosp -> props?

{
prosp: ['mappedMatches']
}

Czego dokładnie (której wartości/zmiennej) dotyczy błąd o immutable?

---

tak, jest literówka

Jeśli w watch zamiast robić listę o nazwie test, przypisałem mapowanie do propertisa mappedMatches to dostałem komunikat o tym że próbuję iterować po mappedMatches, które jest zmienialne(mutable)

watch: {
  teams(newVal) {
    mappedMatches = this.matches.values.map((match) => {
      return {
        homeTeam: newVal.values.find(element => element.id == match.homeTeam),
        awayTeam: newVal.values.find(element => element.id == match.awayTeam)
      };
    })
  },
},

 

---

A czy przypisanie zmapowanego this.matches.values, nie powinno być do this.mappedMatches? Teraz przypisujesz do zmiennej mappedMatches, a nie do property componentu. Jeśli to jest immutable, to znaczy że nie możesz mutować (modyfikować) zawartości, ale przypisanie (zmiana referencji) do tego obiektu/tablicy powinna być możliwa.

Nie znam Vue, ale Twój problem polega na odświeżeniu DOM po wykonaniu asynchronicznej operacji. Tutaj masz podpowiedź na StackOverflow jak to zrobić - powinno pomóc: https://stackoverflow.com/a/49746754/4983840

---

Tak powinno być this.mappedMatches.

Chodzi własnie o to że property mappedMatches w tym wypadku NIE JEST immutable i Vue tego nie pozwala zrobić, żeby w template iterować po mutowalnym polu bo ono może się zmieć i będzie się zmieniać na re-renderze. Przypisanie jest możliwe, ale nie możliwe jest tworzenie komponentów.

W podanym przez Ciebie linku do stackoverflow wszystko dzieje się w jednym komponencie. Korzystam ze Store i mechanizmu mapGetters. Problem w tym rozwiązaniu jest taki, że jeśli przyjdą dane z serwisu API i przypiszesz to do obiekut, który jest w 

data() {}

to komponent tego nie złapie. Myślałem, że watch jest od tego aby obserwować czy jakieś dane się zmieniły i na tej podstawie regować. Ale tak nie działa

---

property mappedMatches w tym wypadku NIE JEST immutable i Vue tego nie pozwala zrobić

To zrób je immutable i przypisz zmapowane dane do property?

Zapoznałeś się z computed property vs watch?