Vue嵌套的组件不会更新其数据并重新呈现

Question

这是一个场景。我可以上传一个LiteratureReview，每个可以包含一个或多个Quote。因此，我拥有的是LiteratureReview(父)和Quote(子)组件。我使用Axios获取和发布数据。我的后端是Laravel。

LiteratureReview和Quote从应用程序实例中获取数据。在发送post请求之后，LiteratureReview将更新并重新呈现页面。但是当我想要在其文献评论中添加一个Quote时，它不会更新，我需要刷新页面。

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 (组件；父组件)

<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>

报价(组件；子项)

<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>

Axios发表文献评论

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)
)

Axios发布报价

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

这个article在一定程度上帮助我解决了这个问题。所以基本上，数据是通过弹出模式的提交按钮更新的。我制作这个按钮是为了向根this.$root.$emit('forceRerender')发出一个事件，这个事件在创建时被LiteratureReview，this.$root.$on('forceRerender', this.forceRerender)接收到。然后，LiteratureReview组件运行包含axios.get('/quote').then(response => this.quotes = response.data)的forceRerender()。

模式

<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>