Vue - вложенный компонент не будет обновлять свои данные и перерисовывать

Question

Вот сценарий. Я могу загрузить один LiteratureReview, и каждый может содержать один или несколько Quote. Итак, у меня есть компоненты LiteratureReview (родительский) и Quote (дочерний). Я получаю и публикую данные, используя Ax ios. Мой бэкэнд - Laravel.

LiteratureReview и Quote получают свои данные из экземпляра приложения. После отправки запроса на публикацию, LiteratureReview обновит и повторно отобразит страницу. Но когда я хочу добавить Quote к обзору литературы, он не обновляется, мне нужно обновить sh страницу.

app. js (или main. js)

export const app = new Vue({
    el: '#app',

    data: function () {
        return {
            literatureReviews: [],
            quotes: [],
        }
    },
    mounted() {
        axios.all([
            axios.get('/literature-review'),
            axios.get('/quote')
        ]).then(axios.spread((first_response, second_response) => {
            this.literatureReviews = first_response.data
            this.quotes = second_response.data
        }))
    }
});

index.blade. php

<literature-review v-for="(literatureReview, index) in literatureReviews" v-bind:loop="index + 1"
            v-bind:key="literatureReview.id" v-bind:literature_review_id="literatureReview.id"
            v-bind:topic="literatureReview.topic" v-bind:type="literatureReview.type"
            v-bind:year="literatureReview.year" v-bind:link="literatureReview.link"></literature-review>

LiteratureReview (Component; Parent)

<template>
    <div class="literature-card mb-5 rounded">
        .
        .
        .
        <quote v-for="quote in filterByLiteratureReview(quotes, literature_review_id)" v-bind:key="quote.id"
            v-bind:literature_review_id="literature_review_id" v-bind:quote="quote.quote" v-bind:page="quote.page"></quote>
    </div>
</template>

<script>
    import { app } from '../app.js'
    import { store } from '../app.js'

    export default {
        props: ['loop', 'literature_review_id', 'topic', 'type', 'year', 'link'],
        data() {
            return {
                quotes: app.quotes,
                sharedObject: store,
            }
        },
        methods: {
            filterByLiteratureReview(quotes, literature_review_id) {
                return this.quotes.filter(quote => quote.literature_review_id == literature_review_id)
            },
            updateLitIdForAddingQuote(value) {
                this.sharedObject.setLiteratureReviewIdAction(value)
            },
        }
    }
</script>

Цитата (Component; Child)

<template>
    <div>
        <div class="row no-gutters px-3 pt-3">
            <div class="col" style="white-space: pre-wrap;">{{ quote }}</div>
        </div>
        <div class="row no-gutters" style="border-bottom: solid black 2px;">
            <div class="col py-4 pr-3 text-right">Pg {{ page }}</div>
        </div>
    </div>
</template>

<script>
    export default {
        props: ['id', 'literature_review_id', 'quote', 'page'],
    }
</script>

Топор ios опубликовать обзор литературы

axios.post('/literature-review', {
    topic: this.topic,
    type: this.type,
    year: this.year,
    link: this.link,
}).then( response => {
    $('#addSourceModal').modal('hide')
}).finally(
    axios.get('/literature-review').then(response => app.literatureReviews = response.data)
)

Топор ios разместить цитату

axios.post('/quote', {
    literature_review_id: this.sharedObject.state.literature_review_id,
    quote: this.quote,
    page: this.page
}).then( response => {
    console.log(response)
    $('#addQuoteModal').modal('hide')
    // location.reload();
}).finally(
    axios.get('/quote').then(response => app.quotes = response.data)
)

Answer 1

Эта статья несколько помогла мне решить ее. Таким образом, в основном, данные обновляются с помощью кнопки отправки всплывающего модального окна. Я сделал эту кнопку для отправки события на root this.$root.$emit('forceRerender'), которое получено LiteratureReview, this.$root.$on('forceRerender', this.forceRerender) при создании. Компонент LiteratureReview затем запускает свой forceRerender(), содержащий axios.get('/quote').then(response => this.quotes = response.data).

Модальный

<script>
    export default {
        props: ['target'],
        methods: {
            submit() {
                this.$emit('submit')
                this.$root.$emit('forceRerender')
            }
        }
    }
</script>

Компонент обзора литературы

<script>
    import {
        app
    } from '../app.js'
    import {
        store
    } from '../app.js'

    export default {
        props: ['loop', 'literature_review_id', 'topic', 'type', 'year', 'link'],
        data() {
            return {
                quotes: app.quotes,
                sharedObject: store,
            }
        },
        created() {
            this.$root.$on('forceRerender', this.forceRerender)
        },
        methods: {
            filterByLiteratureReview(quotes, literature_review_id) {
                return this.quotes.filter(quote => quote.literature_review_id == literature_review_id)
            },
            updateLitIdForAddingQuote(value) {
                this.sharedObject.setLiteratureReviewIdAction(value)
            },
            forceRerender() {
                axios.get('/quote').then(response => this.quotes = response.data)
            }
        }
    }
</script>