Not getting any data from api controller into vue component

Question

I have a component in vue 3 named index which gets the user form data and passes it onto api controller in laravel.

async submitForm() {
  try {
    await axios.post(
      "/api/show",
      {
        firstname: this.form.firstname,
        email: this.form.email,
      },
    );
  } catch (error) {
    console.error("error");
  }
 
},

and I'm trying to fetch the data sent into the controller via following method onto another component named show and all I'm getting is empty string and I don't understand the reason. Any guide would be really appreciated.

   loadProductDetails() {
    axios.post("api/show")
    .then(({data}) => (this.products = data));
    
},

Answer 1

Solved the issue. It was because I was trying to get response from two different routes but the first one was already fetching the post response data and second one was returning the empty string and replacing the data I already recieved from the response.

   try {
    axios
      .post("/api/show", {
        firstname: this.form.firstname,
        email: this.form.email,
        selectedAnswer: this.form.selectedAnswer,
        selectedCategory: this.form.selectedCategory,
      })
      .then((res) => {
        localStorage.setItem("show", JSON.stringify(res.data));
      });
  } catch (error) {
    console.error("error");
  }

Simply saving the response data into local storage and getting it from another component solved the issue.

loadProductDetails() {
    this.products = JSON.parse(localStorage.getItem('show'));
}