Getter, Setter w momencie consol.log'a obiektu

Question

Hej,

Mam pewien problem z updat'em danych które wyświetla pętla v-for.

Pętla wyświetla obiekty znajdujące się w tabeli "requirements". Tutaj wszystko działa. Problem pojawia się w momencie gdy chcę zaaktualizować pierwszy obiekt w tablicy.

W momencie kiedy używam

this.requirements[0] = data;

tablica nie wyświetla zmian dokonanych na obiekcie. Jeśli zrobię to w następujący sposób:

this.requirements[0].name = data.name;
this.requirements[0].value = data.value;

Dane się aktualizują bez problemu.

Zauważyłem, że w Consol.log'u dwa obiekty wyświetlane są innaczej

this.requirements[0] wyświetla się formie

Object { id: Getter & Setter,  name: Getter & Setter, value: Getter & Setter, … }

Data za to wyświetla się w następujący sposób:

Object { id: 20, name: "Jakas nazwa", value: "200" }

Wydaje mi się, że to jest przyczyną tego, że obiekt się nie aktualizuje

Comments

Pokaż jak tworzysz this.requirements.

---

Parent:

  methods: {
    loadData(){
      axios.get(uri).then(response=>{
        this.requirements = response.data.requirements;
      })
    }
  },

Przekazuje go potem do child'a:

 <datatable :emitedRequirements="requirements" />

Odbieram go za pomocą props a następnie "zamrażam" aby usunąć problem z mutacją

data() {
    return {
      requirements: []
    }
  },

  props: {
    emitedRequirements: Array,
  },

  mounted() {
    this.requirements = JSON.parse(JSON.stringify(
      this.emitedRequirements
    ));

  }

 

Answer 1

Odbieram go za pomocą props a następnie "zamrażam" aby usunąć problem z mutacją

Gdzie go zamrażasz? JSON.parse(JSON.stringify( .. )) nie mrozi obiektu, tylko zwraca jego pełną kopię. Do zamrażania ("płytkiego") służy Object.freeze.

Czy Twoja apka chodzi w strict mode? Jeśli tak, to przy próbie mutacji zamrożonego obiektu powinien być rzucany w konsoli błąd.

---

W dokumentacji jest napisane, że Vue trawersuje obiekty przekazane przez propsy i zmienia ich wartości na gettery/settery (o czym wspomniałeś). Nie potrafi natomiast wykryć zmiany w tablicy dokonywanych w bezpośredni sposób (przez przypisanie) - przypadek opisany w drugim punkcie - ale wrapuje sobie jej metody prototypowe (push/pop/slice itd.). Więc aktualizacja tablicy powinna się udać przy ich użyciu.

---

Swoją drogą, dlaczego dane z props do data przekazujesz w hook'u mounted?

Comments

1. Chodziło mi o kopie. Pobieram requirements z bazy i rozprowadzam go po komponentach które już potem działają niezależnie (Aby nie robić 4 razy takich samych zapytań tylko jedno)

2. Tak, jest w strict mode. W momencie kiedy próbuję dokonać zmian na propsie, konsola wypluwa błędy

3.Jeśli dobrze zrozumiałem, to muszę usunąc rekord a następnie wstawić na jego miejsce nowy ?

4. Szczerze to nie wiem. Widziałem to w kursie i tak jakoś robię :P

---

1. Z dokumentacji wynika, że wartości zwracane z metody data są dostępne per instancja komponentu - więc raczej nie ma sensu ich kopiować przy przekazywaniu przez propsy

3. Metodami z Array.prototype (podałem przykłady i podlinkowałem docsy w poprzednim komentarzu). W Twoim przypadku splice powinien zmienić wartość tablicy pod konkretnym indeksem.

4. To spróbuj przerzucić się na przekazywanie props -> data https://vuejs.org/v2/guide/components-props.html#One-Way-Data-Flow . Chyba, że czekasz aż załaduje się DOM tego komponentu (mounted hook wtedy się odpala).

---

Serdecznie dziękuje za wyjaśnienia :)