2017-07-10 21 views
6

Mam 2 komponenty: Post i Comments.Vue.js przekazywanie rekwizytów do danych

Wewnątrz komponentu Post, istnieje komponent Komentarze, który ma 3 podpórki: postId, numCom (liczba komentarzy) i comments (tablica).

uzyskać komentarze i przekazać tablicę z rekwizytami, a teraz chcę odzyskać tablicę w komentarzach komponentu i dodać go do danych, więc można następnie dodawać/usuwać komentarze itd

Tu jest mój kod w Comments.vue:

props: ['id', 'numCom', 'comments'], 
data: function() { 
    return { 
    newMessage: "", 
    loading: false, 
    allComments: this.comments, 
    num: this.numCom, 
    } 
}, 

Ale to nie działa. W narzędziach programistycznych Vue widzę, że podpora comments jest wypełniona komentarzami, ale tablica allComments jest pusta.

Co należy zrobić?

+0

Czy jesteś pewien, że 'comments' prop ma wartość w czasie, gdy składnik jest utworzony? –

+0

Będziemy musieli zobaczyć więcej kodu, ponieważ rzuciłem razem przykład i jego działanie dla mnie. https://jsfiddle.net/7xxwq1e2/18/ – Stephen

+0

@DecadeMoon tak, jest małe opóźnienie, ponieważ wykonuję żądanie GET, a następnie wypełniając rekwizyty ... Jak mam to rozwiązać? Mogłem wykonać żądanie GET w komponencie Komentarze, ale jak mogłem wyzwolić funkcję w komponencie Komentarze ze kontrolera Post, gdy wyświetlam nowy post? –

Odpowiedz

6

Wygląda na to, że podpora comments nie ma wartości w momencie jej utworzenia (jest to jedyny czas ustawiony na allComments).

Można:

  1. Defer utworzenie komponentu do comments rekwizytem jest gotowy za pomocą v-if tak:
<comments v-if="comments" :comments="comments"></comments> 
  1. Obserwuj zmiany w podpunkcie comments i ustaw allComments na nową wartość (oprócz inicjowania allComments w funkcji danych):
watch: { 
    comments(value) { 
    this.allComments = value; 
    } 
} 
+0

Działa doskonale. Dzięki! –

Powiązane problemy