i have a vue app which i'm trying to add a comment but each time i add the comment ,i have to hard refresh so i'll be able to see the comment
i have 4 components for this
blog component in which i can get details of the of the blog
this is my template
<div class="container">
<h3 class="pt-4"> {{blog.title}}</h3>
<blogSlot />
<Review/>
</div>
this is my script tag
<script>
import axios from "axios";
import blogSlot from "../components/blogSlot.vue";
import Review from "../components/Review.vue";
export default {
components: {
Review,
blogSlot
},
data(){
return{
blog:[]
}
},
watch: {
},
mounted() {
axios
.get(`http://localhost:4000/api/blogs/${this.$route.params.id}`, {})
.then(response => {
console.log(this.$route.params.title)
// console.log(response);
this.blog = response.data.blog;
})
.catch(error => {
console.log(error);
});
}
};
</script>
blog slot in which i'm using as props
this my template
<div>
<reviewSection
:blog="blog"
:reviews="reviews"
/>
</div>
script tag
<script>
import axios from "axios";
import reviewSection from "../components/reviewSection.vue";
export default {
components: {
reviewSection
},
data() {
return {
blog: null,
reviews: null,
};
},
async mounted() {
axios
.get(`http://localhost:4000/api/blogs/${this.$route.params.id}`, {})
.then(response => {
this.blog = response.data.blog;
})
.catch(error => {
});
axios
.get(`http://localhost:4000/api/reviews/${this.$route.params.id}`, {})
.then(response => {
this.reviews = response.data.reviews;
})
.catch(error => {
});
}
};
</script>
review component which is used to add reviews
template
<textarea
placeholder="Add a comment"
style="height:6em; width: 100%;"
v-model="body"
></textarea>
<button
class="a-button-text btn"
@click="onAddReview"
>Submit</button>
my script tag
<script>
import axios from "axios";
export default {
data() {
return {
body: "",
blog: []
};
},
mounted() {
axios
.get(`http://localhost:4000/api/blogs/${this.$route.params.id}`, {})
.then(response => {
this.blog = response.data.blog;
})
.catch(error => {
console.log(error);
});
},
methods: {
async onAddReview() {
try {
var data = {
body: this.body,
};
let response = await axios.post(
`http://localhost:4000/api/reviews/${this.$route.params.id}`,
data,
);
if (response) {
this.$router.push(`/blog/${this.$route.params.id}`);
}
} catch (err) {
}
}
}
};
</script>
this is my reviewSection component to display the reviews
template tag
<div
v-for="review in reviews"
:key="review._id"
class="pt-3"
>
{{ review.body }}
</div>
my script tag
<script>
export default {
props: ["blog", "reviews"]
};
</script>
pleasse how can i make it so that i don't need to hard refresh in order to get a review