Axios promise handler in Vue Js is limited to processing only a single statement at a time

I'm currently utilizing Vue Js in my Laravel project to execute a POST request. Everything seems to be functioning properly, but I'm encountering some issues while dealing with the promise:

      axios.post('/customer/update',this.customer)
      .then(response =>(
      //this.customer = response.data.customer 
      this.error.text = response.data.message
      )).then(response =>(
        this.error.show = true
      )).then(response =>(
        this.error.class = true
      )).catch(err => {
        console.log(err);
      })
    }

Currently, I am forced to string multiple .then() statements together to handle each individual statement within it. My ideal scenario would be something like this:

      axios.post('/customer/update',this.customer)
      .then(response =>(
      this.customer = response.data.customer
      this.error.text = response.data.message
      this.error.show = true
      this.error.class = true
      )).catch(err => {
        console.log(err);
      })
    }

If you have any insights or suggestions, please feel free to share because I can't seem to identify what's causing the issue here. It should work as intended, but it's not.

The error message I'm receiving is:

Uncaught SyntaxError: Unexpected token 'this'

This error is pointing towards my created tag:

    created(){
    this.greeting;
    console.log(this.customer)
  }

Answer №1

Seems like there might be a typo in your code - using parentheses instead of curly brackets. It should look something like this:

 axios.post('/customer/update',this.customer)
    .then(response => {
        this.customer = response.data.customer;
        this.error.text = response.data.message;
        this.error.show = true;
        this.error.class = true;
    })
    .catch(err => {
        console.log(err);
    });

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

Retrieve every video on React.js channel from YouTube

Currently, I am working on integrating react-youtube into my React App with the goal of accessing all videos from a specific YouTube channel. The challenge I am facing is that I need to display these videos as thumbnails, exactly how they are listed in the ...

Issue concerning the relative path of RequireJS optimizer

Currently, I am attempting to implement the require optimizer's browser example. My folder structure is set up as follows, with the "r.js" and "build.html" files located at the same level as the "js" folder. js lib | a.js | b.js | ...

Rails confirmation feature malfunctioning

I have been struggling to figure out where I am going wrong with this code even though I've checked several posts. I am using Ruby on Rails and trying to run the following snippet: <%= link_to 'Destroy', article_path(article), ...

Tips for obtaining the current title of the active process or window

In the process of creating a desktop application that will work across different platforms, I am using Electron, nodeJs, and angular2. One of the essential features my application requires is the ability to constantly track and identify the active foregr ...

Adding Numerous Elements to a Container

In my HTML code, there is a div element with the id of controls. I am attempting to add a div containing 2 input fields using this method: this.controls = controlBtns .append('div') .classed({'time-container': true}) .appe ...

Error in THREE.js: Failed to retrieve object at http://192.168.8.104:8080/[object%20Object] (Error code: 404) - Module: three.module.js

During my attempt to create a text loader in THREE.js, I encountered an error instead of getting the expected text output. three.module.js:38595 GET http://192.168.8.104:8080/[object%20Object] 404 (Not Found) I made various efforts to resolve this error ...

I need my styled component to make sure my inner div spans the entire width of its parent div

I'm having an issue with my NavDiv styled component not taking up the full height of my Wrapper styled component. I've tried setting the height using different units like percentage, em, rem, but it doesn't seem to work. It only works when u ...

When employing jest alongside vue, an Unexpected identifier error may occur when attempting to import modules

I am currently diving into jest while utilizing vue3 and jest 26.6.3 for my project //pachage.json "jest": { "moduleFileExtensions": [ "js", "json", "vue" ], "moduleNameMapper": { "^@/(.*)$": "<rootDir>/src/$1", "^vue$ ...

What is the best way to store a downloaded video from the server?

I am currently in the process of downloading a video from a server using JavaScript XHR (specifically Angular $http GET with response type 'blob'). My question is, how can I save this downloaded video to a Chrome application's local storage ...

What is the process for transferring npm package files to my local project?

Despite my efforts to find the answer, I couldn't locate it and so here I am asking again. What I'm looking for: I need to move a file from node_modules to my project in order to work on it. First attempt: I moved the file I wanted to edit An ...

Is it possible to modify the object's key value when generating an array value with the map function in React?

I have the array object data stored in a variable called hi[0].child. hi[0].child = [ {code: "food", name: "burger"}, {code: "cloth", name: "outer"}, {code: "fruit", name: "apple"}, ] ...

How to trigger a force reload on a VueJS route with a different query parameter?

Is there a method to refresh the page component when two pages utilize the same Component? I have encountered an issue where the router does not reload and the previous edit values persist. { path: "/products/new", component: ProductPage, meta: { ...

The ".splice()" method continuously removes the final element from an array

I have implemented a function on my form that allows me to add multiple file inputs for various images by clicking a button. Although this functionality is working correctly, I am facing an issue while trying to delete an input field using .splice. Instead ...

How can parameters be passed to a JavaScript or jQuery function?

I am currently utilizing a JS/JQ function to convert values into currency by adding commas. Although the function is running smoothly, I am encountering an issue when attempting to pass parameters to it. Kindly provide assistance on how to successfully pas ...

Ways to examine attributes assigned in the controller.$onInit function in AngularJS

In a certain scenario, I am initializing some variables in the controller's $onInit method. How can I verify that these properties are being set correctly? Controller ctrl.$onInit = function () { ctrl.devices = _.cloneDeep(ctrl.formDevices); }; ...

Instructions on creating a vertical height adjustment handle for a website

Is there a way to create a 100% height div that can be divided by a draggable border vertically? Take a look at my fiddle to see what I have so far: http://jsfiddle.net/k5rtbzs5/ This is the HTML code: <div class="column"> <div class="top"> ...

jQuery: Function is not running as expected

I'm facing a challenge in executing a function twice, and I'm having trouble identifying the issue. Check out my JSFiddle at the following link: http://jsfiddle.net/g6PLu/3/ Javascript function truncate() { $(this).addClass('closed&apo ...

A method for dynamically enlarging a parent node within a dhtmlx tree using JSON data

As I was browsing through the dhtmlx documentation, I came across this particular method: This method determines how the server-side URL is constructed when making dynamic loading calls: <script> tree.setXMLAutoLoadingBehaviour(mode); </s ...

CSS animation is activated solely upon its initial creation

Exploring the world of Vuejs for the first time with my debut project. The core of my project lies in the main component where I have an array as a data variable. Here's an example snippet: export default { name: 'example-component', ...

Import JSON Data into Angular-nvD3 Chart (AngularJS)

I am seeking help to load encoded JSON Data retrieved from a database via queries into an Angular-nvD3 graph. I am unsure about the best approach to achieve this task. The encoded JSON data is fetched using API queries from a database table called PRODUCT ...