In this scenario, I have the ability to upload a single LiteratureReview which can contain multiple Quote components. Essentially, I am dealing with parent-child relationships between LiteratureReview and Quote. Data retrieval and submission are done using Axios and my backend is built on Laravel.
Both LiteratureReview and Quote components fetch their data from the app instance. When making a post request, updating and re-rendering for LiteratureReview works fine. However, when attempting to add a Quote to a literature review, it does not update automatically, requiring a page refresh.
app.js (or 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>
Quote (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>
Axios posting a Literature Review
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 posting a Quote
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)
)