using vuejs, learn how to retrieve properties within the .then function

This is the code I am working on:

  methods: {
    async pay() {
      this.$notify(`working`);
      if (!this.$v.$invalid) {
        try {
          var data = {
            to: this.to,
            subject: this.subject,
          };

          let response = await axios
            .post("http://localhost:4000/api/blogs", data)
            .then(() => {
              this.$notify(`email has been sent`);
            
            })
            .catch(error => {
              const message = error.response.data.message;
              this.$notify("Oh oo!", `${message}`, "error");
            });
        } catch (err) {
          console.log(err);
        }
      }
    }
  }

I'm attempting to show the message "email has been sent" as soon as the email is successfully sent. However, it's not working even if I try using console.log or alert in the function within .then block.

When I execute the function, I see "working" notification first before the actual email sent notification.

Can anyone please suggest how can I achieve the desired behavior?

Answer №1

there's a possibility that the problem lies in your backend, I encountered a similar issue before and resolved it by including

 res.json({
            status: true,
            message: "save successful",
           });

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing Javascript and CSS for horizontal alignment from left to right

I have a JavaScript function that generates a list of store locations and creates a DIV beneath the map. Currently, the items are displayed top to bottom on the page. However, I would like to change the layout so that the items are shown as 3 in a row fro ...

MUI Grid with Custom Responsive Ordering

Can I achieve a responsive grid layout like this example? Check out the image here I have already coded the desktop version of the grid: <Grid container spacing={2}> <Grid item sm={12} lg={6} order={{ sm: 2, lg: 1 }}> ...

Encountering a 404 Error while using GetStaticPaths in NextJs

Having issues with Next JS dynamic routes resulting in a 404 Error. Initially attempted debugging by setting it up dynamically, then manually at http://localhost:3001/question/62e7b69ca560b1c81aa1a853 but still encountering the same issue. Tried toggling f ...

Changing the bootstrap popover location

I'm looking to customize the position of a Bootstrap popover that appears outside of a panel. Here's my setup: HTML: <div class="panel"> <div class="panel-body"> <input type="text" id="text_input" data-toggle="popover ...

Utilize select2 for dynamically loading an external html component

When the page is loaded, it includes another HTML page with a select element that I want to style using select2. The basic page structure looks like this: <select class="selectAddItem" id="selectAddItem" name="selectAddItem" style="width: 150px;" clas ...

What is the best way to eliminate an item from an array in JavaScript or AngularJS?

I'm attempting to eliminate objects from an array and retrieve the resulting array. I've been using a remove function, but it's not functioning as expected. Here is the input I'm working with: The goal is to remove all values in the ar ...

The utilization of Vuetify's v-data-table alongside the group by feature and a customized v-slot for rows has led

Vuetify version: 2.6.3 Vue version: 2.6.14 I have a query regarding the usage of v-data-table in Vuetify and its v-slot for customizing rows. I am facing an issue where, on clicking pagination, the top grouped header (w1, w2, w3) gets checked unexpectedly ...

What seems to be the issue with this basic Node.js function not functioning properly?

I'm attempting to utilize a function that returns a boolean answer and then verifying it using if-else statements. function checkDNS(domain, tld) { var dns = require('dns'); dns.lookup(domain+'.'+tld, function (err, addres ...

Is it possible to dynamically pass a component to a generic component in React?

Currently using Angular2+ and in need of passing a content component to a generic modal component. Which Component Should Pass the Content Component? openModal() { // open the modal component const modalRef = this.modalService.open(NgbdModalCompo ...

Adding or removing rows within an array in a hybrid Vue project - a step-by-step guide

Recently, I created a small web application to assist in organizing my project ideas. Check it out here: https://codepen.io/aibrindley/pen/ELXajM Now, I am working on enabling users to add items to the array directly from the interface. It would also be c ...

Why does the CSHTML button containing a JavaScript onclick function only function intermittently?

I've implemented a download button on a webpage that dynamically assigns an ID based on the number of questions posted. Below is the code for the button: <input data-bind="attr: { id: $index() }" type="button" value="Downlo ...

XPages component retrieval function is malfunctioning

Utilizing an XPage with JQuery dialog and client-side validation adds efficiency to the user input process. However, there seems to be a disconnect between the client-side validation and server-side properties. Although the client-side validation functions ...

Issues with Ionic's $state.go and ui-sref functions not functioning as expected in the app

While attempting to change the view on the Ionic View app for iOS (I have not tested on the Android app), I encountered a bug that seems to have a solution, but unfortunately, it does not work for me. Bug info: Bug info 2: My Ionic information is as fol ...

Why does the HTML and CSS slider fail to load upon page refresh, yet works perfectly when the next or previous button is clicked?

There seems to be an issue with the slider images not loading on page refresh. Oddly enough, they appear only after clicking the next button. However, upon refreshing the page again, the images disappear. <div class="slide-banner"> < ...

Using the swiper carousel on WordPress results in an unexpected horizontal scrolling issue

Running an Elementor website, I need to incorporate various image carousels within my post content. Initially, I created a template for each carousel using Elementor. However, I have now decided to switch to utilizing a shortcode that leverages Elementor&a ...

Anticipated that the absence of a value would match the presence of an Object

Struggling with running AngularJS unit tests for $resource using Jasmine v2.0 and Karma v0.13, I managed to convert custom actions to newer syntax successfully. However, a specific type of test is giving me trouble, which I suspect is related to $httpBacke ...

What is the best way to incorporate a smooth transition for an object as it appears on the screen in React?

After configuring my code to display a component in the HTML only if a specific hook is set to true, I encountered an issue with a CSS transition. The problem arises because the 'open' class is triggered at the same time the element becomes true, ...

How to retrieve an element from a v-on event handler in Vue3

There are times when I find myself needing to access a component element in Vue. For example, in element-plus, I may need to ensure that focus is removed: <el-button ref="btnLanza" @mouseleave="$refs.btnLanza.$el.blur()" @click=" ...

Ways to prompt for user input using JavaScript

How can I collect user input using JavaScript for a website that saves the input into a text file? Below is the code I am currently using: <button type="button" onclick="storeEmail()">Enter Email</button> <script> ...

Warning: Vue Router is not functioning properly and Router.push is not working as expected

I have been experiencing issues with routing to another page after receiving a response from my Adonis project. While the post method is being called successfully, the router.push('/') function does not seem to be working as expected. Instead, th ...