Właściwy sposób vueJS do synchronizacji rekwizytów z danymi

Question

Rozważmy aplikację VueJS, która pozwala na wyświetlanie/edytowanie blogposts.

• Po kliknięciu "edytuj blogpost" pokazany jest modal (komponent Vue), aby edytować bieżący blogpost (tylko zwykły obiekt js).
• W tym celu przekazuję bieżący blogpost jako prop do modalnego komponentu.
• Składnik modalny składa się z kilku pól formularzy, które powinny być wypełnione atrybutami blogpost.
• Jednak sposób Vue 'ma mieć obiekt data na komponencie Modal, który działa jako model do wypełniania pól formularza, i na odwrót, być aktualizowany, gdy użytkownik zmienia pola formularza.

Problem: Jak mam podłączyć blogpost która jest przekazywana jako prop dziedziny modalnego składnika data tak że:

• blogpost wypełnia pola formularza
• z blogpost jest aktualizowany podczas aktualizowania pól formularza:

Jaki jest właściwy sposób Vue, aby to osiągnąć?

Answer 1

Masz trzy (co najmniej) sposoby prowadzenia go:

1) Podłączyć danych za pomocą atrybutu prop, tak jak robisz, ale dodać atrybut .sync do niego. W ten sposób, gdy dane zostaną zmodyfikowane w formularzu, automatycznie zostanie on również zmodyfikowany na komponencie. Problem z tym rozwiązaniem polega na tym, że aktualizacja jest automatyczna, więc jeśli sprawdzanie poprawności nie powiedzie się lub użytkownik zamknie modal bez zapisywania zmian, i tak zostaną one zapisane. Przykład: https://jsfiddle.net/Lz3aq64f/

2) Innym sposobem na zrobienie tego modala jest $dispatch wydarzenie z zapisaną informacją po zapisaniu. Element blogpost powinien nasłuchiwać tego zdarzenia i postępować zgodnie z nim.

Na modalnym:

this.$dispatch('update-post', this.title, this.author); 

Na blogpost:

this.$on('update-post', function(title, author) { 
    this.title = title; 
    this.author = author 
}); 

Jeśli składnik blogpost i składnik modalne nie są w tej samej hierarchii, robi się trochę bardziej skomplikowane, a prawdopodobnie potrzebujesz wspólnego elementu nadrzędnego, aby działać jako proxy. Zastanów się, czy element 0123, czy też nie, przechwytuje go przez $on, a następnie robi $broadcast dla elementu .

3) Użyj czegoś podobnego do vuex, aby działać jako centralne repozytorium stanu. Nie wiem, jak duża jest twoja aplikacja, ale byłaby to najczystsza droga: http://vuex.vuejs.org/en/index.html

Powodzenia!