Vue 3 post request is working but not showing anything until page is reloaded

user_14452914 0
Viewed 577

I have my post request working properly but am not seeing anything on the page until I do a hard refresh. I will appreciate anyone's take on what I should do. I've been stuck on this issue for a bit. I am new to using Vue3.

Where I am fetching api data:

created() {
    fetch(BASE_URL + "reviews")
      .then((res) => res.json())
      .then((results) => {
        this.reviews = results;
      });
  },

My post method:

  methods: {
    addReview() {
      console.log(this.review);
      fetch(BASE_URL + "reviews", {
        method: "POST",
        body: JSON.stringify(this.review),
        headers: {
          "content-type": "application/json",
        },
      })
        .then((res) => res.json())
        .then((result) => {
          if (result.details) {
            const error = result.details
              .map((detail) => detail.message)
              .join(".");
            this.error = error;
          } else {
            this.error = "";
            this.reviews.push(result);
          }
        });
    },
vue.js fetch api javascript
1 Answers
<script>
import Navbar from "./Navbar";
import Footer from "./Footer";
const BASE_URL = "https://gearsbeans-api.herokuapp.com/";
// const BASE_URL = "http://localhost:3001/";
export default {
  name: "Reviews",
  components: {
    Navbar,
    Footer,
  },
  data: () => ({
    error: "",
    reviews: [],
    review: {
      name: "",
      message: "",
      product: "",
      stars: 0,
    },
    about: "Check out our reviews",
  }),
  computed: {
    reversedReviews() {
      return this.reviews.slice().reverse();
    },
  },
  methods: {
    getReviews: async function() {
      const response = await fetch(BASE_URL + "reviews");
      const data = await response.json();
      this.reviews = data;
    },
    addReview: async function() {
      await fetch(BASE_URL + "reviews", {
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          name: this.review.name,
          message: this.review.message,
          product: this.review.product,
          stars: this.review.stars,
        }),
      });
      (this.review.name = ""),
        (this.review.message = ""),
        (this.review.product = ""),
        (this.review.stars = null);
      this.getReviews();
    },
    async deleteReview(id) {
      await fetch(BASE_URL + `reviews/${id}`, {
        method: "DELETE",
        headers: {
          "content-type": "application/json",
        },
      }),
        this.getReviews();
    },
  },
  created: function() {
    this.getReviews();
  },
};
</script>
user_144529140
Related