Is there a way to display the comment instantly after clicking on the submit button, without having to refresh the page? Currently, the comment is saved to the database but only appears after refreshing. I'm looking for a solution or syntax that can help achieve this.
<div class="form-group">
<h1>Review Here</h1>
<textarea
class="form-control mb-2"
rows="3"
v-model="getReview.getDescription"
></textarea>
<div class="row">
<div class="col-md-6">
<div id="ratings">
<div id="like" class="rating">
<input
type="radio"
value="5"
v-model="getReview.getRating"
>
<input
type="radio"
value="4"
v-model="getReview.getRating"
>
<input
type="radio"
value="3"
v-model="getReview.getRating"
>
<input
type="radio"
value="2"
v-model="getReview.getRating"
>
<input
type="radio"
value="1"
v-model="getReview.getRating"
>
</div>
</div>
</div>
<div class="col-md-6">
<button v-on:click="addNewReview()">Submit</button>
</div>
I am trying to add new comment data to the reviews array with the following script:
<script>
export default {
props: ["id", "usernow"],
data() {
return {
reviews: [],
orgData: {
name_org: "",
headerpic: "",
description: ""
},
getReview: {
getOrgId: this.id,
getUserId: this.usernow.id,
getRating: "",
getDescription: ""
}
};
},
mounted() {
this.getData();
},
methods: {
addNewReview() {
if (
this.getReview.getDescription != "" &&
this.getReview.getRating != 0
) {
axios.post("/api/reviews", {
org_id: this.getReview.getOrgId,
user_id: this.getReview.getUserId,
description: this.getReview.getDescription,
rating: this.getReview.getRating
});
this.getReview.getDescription = "";
this.getReview.getRating = 0;
alert("OK");
} else {
alert("Please Review and rate this");
}
},
getData() {
axios.get("/api/listorgs/" + this.id).then(response => {
var ArrayData = response.data;
this.orgData = ArrayData.ListOrg;
this.reviews = ArrayData.Review.map(review => {
return {
description: review.description,
user: review.user,
rating: review.rating,
created_at: review.created_at
};
});
});
}
}
};
</script>