Error in Vuex store: the callback provided is not a valid function

What could be causing the error message saying "callback is not a function" to appear in this particular action within my Vuex store?

updateRemoteUser: ({ state, commit }, callback) => {
  const user = state.user
  axios.put(`/users/${user.id}`, { 
    user: user
  })
    .then(response => {
      commit('changeUser', response.data.user)
      callback(true)
    })
    .catch(errors => {
      console.log(errors)
      callback(false)
    })
},

UPDATE Furthermore, this action is being invoked as shown below:

async setResponses() {
  this.userResponse = await this.updateRemoteUser()
  if(this.userResponse) {
    this.$router.push({ name: 'weddingDetails' })
  }
  else {
    console.log("Something is jacked")
  }
},

Answer №1

Verify if the callback function is being passed to the tee action. A straightforward examination will provide the solution

if (!callback) console.log('hurray');

Answer №2

When you trigger the mutation...

this.updateRemoteUser({ 
    callback: (e) => console.log('do something') 
})

In Your Vuex Store

updateRemoteUser: ({ state, commit }, data) => {
   const user = state.user
   axios.put(`/users/${user.id}`, { 
    user: user
  })
 .then(response => {
    commit('changeUser', response.data.user)
     if (data.callback) data.callback(true)
  })
  .catch(errors => {
    console.log(errors)
    if (data.callback) data.callback(false)
  })
},

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

Replacement of slot not completed

Is it possible to replace "Default Slot" with a new value called "I need to replace this"? Why does the slot named "btn" not replace the default component value? How can this be fixed? HTML <div id="dropdown-sort-list"> <dropdown-sort-list> ...

Concealing an iframe upon clicking an element

I'm facing an issue with an Iframe on my website. Currently, the Iframe is hidden and becomes visible after the load function finishes. This is done to ensure that any style changes made during loading, such as hiding certain elements and changing the ...

Issue: Cannot access the 'map' property of an undefined value in a React Mongo DB error

My React code was running perfectly fine until I encountered an error message in the browser console: "TypeError: Cannot read property 'map' of undefined". Let me share the snippet of my code with you. const MyComponent = () => { const [dat ...

Click on the entire Material-UI formControlLabel to select it, not just the text

I have recently started working with the material UI. Currently, I am dealing with a form that looks like this: <FormControl variant="outlined" className={css.formControl} margin="dense" key={"abc_" + index} > <FormControlLabel cont ...

Use regular expressions to exclude occurrences of the character 'n' from your text

Looking for a regular expression to validate input, specifically filtering out all special characters except "underscore". All characters within the range [a-zA-Z0-9\underscore] are permitted and can appear multiple times. However, my expression shoul ...

Error encountered in Laravel API route: 'SymfonyComponentHttpKernelExceptionNotFoundHttpException' exception

As I work on creating a blog for my school project on my portfolio website, I am using VueJS and Laravel. To incorporate API routes into my project, it has become necessary. However, I encountered an issue when trying to delete a comment with a specific ID ...

loading xml data into a table partially using jquery

Currently, I am utilizing AJAX to load and parse XML data. I have constructed a table where I am inserting the data from the XML using a loop. The issue lies in the fact that only around 3000 rows are being inserted into the table even though the XML conta ...

Swap out original source files in HTML with minified versions

I have successfully utilized a maven plugin to create a minified and compressed version of my CSS and JavaScript files. Now, I am looking to update the section in my main HTML page that currently loads all those individual files. Here is what it looks lik ...

Having trouble getting the desired output while iterating through a JavaScript object in search of a specific key and value

Here is an example of how my data is structured: var obj = { QuestionId: 97, SortOrder: { '9': '1' }, directive: { '1': false, '2': false, '9': true }, data: { '1': '', '2 ...

Tips for effectively testing an Angular directive

I'm having trouble testing an Angular directive due to encountering the following unexpected error: Error: Unexpected request: GET /api/players/info It seems that the issue may stem from references to my controller within the directive definition ob ...

Facing challenges in implementing a logic to showcase an intricate page on express.js (node.js) platform

Having trouble setting up a functional logic to display a detailed page showcasing the post title, image, and details. Currently, I've successfully created a list page that displays all the posts by the logged-in user with the title, image, and detail ...

In the Kendo AngularJS tree view, prevent the default behavior of allowing parent nodes to be checked

Hi there, I am currently using Kendo treeview with Angularjs. My tree view has checkboxes in a hierarchy as shown below Parent1 Child1 Child2 I would like the functionality to work as follows: Scenario 1: if a user selects Parent1 -> Child1, Chil ...

Utilizing Codeigniter for transmitting JSON data to a script file

When querying the database in my model, I use the following function: function graphRate($userid, $courseid){ $query = $this->db->get('tblGraph'); return $query->result(); } The data retrieved by my model is then encoded in ...

What is the reason for the malfunctioning of this button upon clicking?

Attempting to customize my personal website by making the sidebar width change when the sidebar button is clicked. I'm puzzled as to why it's not working as intended. I prefer to figure it out independently but any helpful tips would be appreciat ...

Unable to change data in table TD using AJAX and PHP received JSON array

I am currently facing an issue with a PHP-AJAX script that is responsible for deleting financial rows from a table. The PHP script is functioning correctly and successfully deleting the rows. However, the problem arises within the success function of the A ...

Display the image title in a separate div when hovering over it

As a beginner in jQuery, I am working on creating a gallery that displays the title attribute of an image in a separate div when hovering over the image. The title should disappear when the mouse moves away from the image. I hope that explanation is clear! ...

Enhance the functionality of AngularJS (Restangular) by encapsulating service methods with a

Initially, when using basic $http, I had this code snippet in a service: var fetchSomeData = function() { var deferred = $q.defer(); $timeout(function() { $http.get('...mylongurl', { headers: { 'Content-Type& ...

Vue application experiencing an issue with data not being populated

I am having trouble retrieving data from my vuex store in a component using computed. Strangely, I am unable to access userInfo.uid in some of my components. Even though VueTools shows that it has been successfully imported, it keeps throwing an error stat ...

Can you explain the slow parameter feature in Mocha?

While configuring mochaOpts in Protractor, one of the parameters we define is 'slow'. I'm unsure of the purpose of this parameter. I attempted adjusting its value but did not observe any impact on the test execution time. mochaOpts: { re ...

CSS styling failing to meet desired expectations

Two different elements from different panels are using the same CSS styles, but one displays the desired text while the other does not. The CSS file in question is named grid.css. To see the issue firsthand on my live website, please visit: I am uncertai ...